Programmers Office

docker pushができたので、今度は、サーバ側からpullします。 サーバは、GCPのつもりでしたが、Mgentoの検証を行っていたAWSを使うか、と考え、それならば、Elastic Container Serviceを使ってみることにします。 Elastic Container Service（ECS） まず、ECSには二つの起動モデルがあります。 ・Fargate 起動タイプモデル ・EC2 起動タイプモデル Fargateはコンテナ用のリソースで、EC2とは切り離されており、それ用の料金が発生します。逆に言えば、コンテナを使うためにEC2を増強するための料金は不要ということです。これに対して、EC2起動モデルの場合は、ECSの料金は不要です。 今回は、EC2の１年間無料枠を利用して、EC2起動タイプで行ってみます。 （AWSもDockerも初心者なのに大丈夫かどうかは不明です） ECSの手順については、こちらを参照させていただきました。 https://dev.classmethod.jp/cloud/aws/amazon-ecs-entrance-1/ 最初の、タスク定義を作成するところで、FARGATEかEC2かを選択するボタンがあるので、EC2を選択します。 タスク定義名は、タスク定義で指定する内容が、使用するDockerイメージだったり、ということなので、WooCommerceとしておきます。 他は初期値のままで「コンテナの追加」をします。 今回は、woocommerce_mariadb_1、woocommerce_wordpress_1として、二つ分追加します。 ポートマッピングは悩みますが、mariadb側はなし、wordpress側は80:80と、443:443を追加しておきます。 タスク定義が正常に作成されました、とのことです。 続いて、クラスターを作成します。 クラスターテンプレートは、Fargateではないので、「EC2 Linux + ネットワーキング」を指定します。 インスタンスタイプは無料枠なので、t2.micro、キーペアは作成済みのものを選択します。 「コンテナインスタンスの IAM ロール」はさらに不明なので、「新しいロールの作成」のまま進めます。 分からないながら進めていき、起動します。 「サービスの検出の統合の有効化」はさらに不明のため、チェックを外しておきます。（上記サイトの絵にはありませんので、貼っておきます） 以上で立ち上がったはずですが、サービス画面に行ってみると、起動失敗。 理由は、 https://registry.gitlab.com/v2/aaa/bbb/woocommerce_wordpress_1/manifests/latest: denied: access forbidden まあ、そうですよね・・・ コンテナの設定の、「プライベートレジストリの認証」「認証情報パラメータ」辺りだと思いますが、今日は時間切れです。

まだ、全然途中ですが、いったんベンダー機能とショップ画面が見えるようになったところで、これを別サーバ（ステージング環境のつもり）に持っていきたいと思います。 Docker力強化の目的もあります。 Docker イメージのレジストリサービス ローカル開発環境のDockerイメージを別サーバに持っていくために、まずは、Dockerイメージを共有することが必要と考えます。すると、レジストリサービスが必要ということが分かります。 そしてレジストリサービスを調べてみると、ありがたいサービスが提供されていることが分かります。 ・Docker Hub ・Amazon Elastic Container Registry (ECR) ・Google Container Registry ・Azure Container Registry ・GitLab Container Registry などなど。 構築先がGCPなのと、このサービスもAlways Free対象なので、Googleも有力な候補ではありますが、ソースをGit管理するなら、同じ管理にするのが合理的なのではということと、GitはGitLab派の私としては、GitLab Container Registryを使ってみることとします。 GitLab Container Registryへのpush 流れとしては、まずcommitして、イメージ作成。 これは、こちらを参照 https://www.memotansu.jp/docker/626/ commitなの、buildなの、というのはよく分かっていませんが、とりあえず、これで行ってみます。 docker login registry.gitlab.com ログインはできます。 しかし、pushは、3つあるイメージのうちの2つをpushしたいわけで、その仕組みがいまいち分かりません。 gitlabのページに記載を参考に、最後に「:タグ名」を付けてみても、 「An image does not exist locally with the tag」 となります。 この辺りを参考に、タグ付けします。 http://docs.docker.jp/linux/step_six.html https://docs.docker.com/engine/reference/commandline/tag/ そうすると、 registry.gitlab.com/aaa/bbb/woocommerce_mariadb_1 v1.1 a4e11e5e5b41 3 hours ago 262MB registry.gitlab.com/aaa/bbb/woocommerce_wordpress_1 v1.1 eba2457b8e6a 4 hours ago 438MB というようなイメージが出来上がります。

商品登録方法は、素のWooCommerceとWC Marketplaceでは考え方が違う部分がありますので、その確認。 商品とベンダーの関係 Setting up – Assign Single Product to Multiple Vendors https://wc-marketplace.com/knowledgebase/setting-assign-single-product-multiple-seller/ WC Marketplaceプラグインインストール時に、「Single Product Multiple Vendors」というチェックボックスがあります。 同一商品を複数ベンダーから販売することができ、購入時に顧客がベンダーを選択することができる、というものです。 これはしないので、スキップします。 管理者による商品の登録 Setting up – Uploading products for WCMp https://wc-marketplace.com/knowledgebase/setting-up-uploading-products-for-wcmp/ アップロードから始まるというのが、順番としてどうなのかと思わざるを得ませんが、必須機能ではある、というかむしろ最終的にはこちらが優先なので、これで良いのか。 ・・・と思って読み進めると、別にファイルアップロードの話ではなく、普通に商品登録の話でした。そういう言葉使いですか・・・ 最初に、承認を経由するかしないかの設定の話。 そして、管理者が通常のWooCommerceの方法で、商品登録する場合の話。 ここで、WC Marketplaceが入っていると、ベンダーを指定するプルダウンがあります。これをクリックすると、中身が空で、「？」と悩むのですが、テキストボックスに一文字入力するとそれにマッチするベンダーが選択できるようになります。まあ、ベンダーが大量に登録されていると、ずらっと出てこられても困るかもしれませんが・・・ 通常のWooCommerceの商品登録の方法については、 https://docs.artws.info/document/managing-products/ のお世話になるのが良いかと思います。 特に商品タイプ、特に「バリエーションのある商品」（Variable product）は重要です。 ベンダーによる商品登録 実際は、商品の登録は各ベンダーがやるでしょう、ということで、その機能についての説明です。 ベンダーのユーザでログインして、Vendor Dashboard画面に入ります。 こちらの画面からの登録も、細かい手順や画面構成が異なるのみで、登録内容は基本的に同じです。 ところが、Product Typeで、「Simple product」しか選択できません。 他のタイプを選択したい場合は、backendに行かなければならないということです。 すなわち、ベンダー用画面には、2種類あります。ログイン直後のVendor Dashboard画面と、wp-adminの画面であるbackendです。 こんなところから移動できます。 こちらに移動すれば、機能制限された管理画面が表示される、というわけです。 Advanced Frontend Manager https://wc-marketplace.com/knowledgebase/wcmp-frontend-manager/ で、一応、AFMというものを使ってほしそうです。 これを使えば、backendに移動せずに、「Simple product」以外の商品メンテもできるということです。 ただ、そんなに、画面からメンテするのか、と考えたら、コスパはあまり良くないかなという気もします。 https://wc-marketplace.com/product/wcmp-frontend-manager/ という感じで、だいぶ理解はできてきました。

しかし、WooCommerceも日本語情報は、豊富とは言えませんね・・・ ほとんどお一人で頑張られている？？ https://docs.artws.info/about-this-site/ WC Marketplaceと言っても、そもそもWooCommerceが分からなければ始まらないので、上記を参考にさせていただきながら、進めていきます。 なお、現時点で、 WooCommerce Version 3.5.3 WC Marketplace Version 3.3.0 です。 基本ドキュメント インストールは、基本レベルだと特に悩まないとは思いますが、 https://wc-marketplace.com/knowledgebase/wcmp-setup-guide/ 一応こちらを参照しておけば、安心かと思います。 その他のドキュメントも、ここから辿っていきます。 ベンダー管理システム Vendors Management System https://wc-marketplace.com/knowledgebase/vendors-submenu/ まず、考え方として、Vendorを登録し、これは、wpサイトログインのユーザにもなります。そして一対一でShopが紐付きます。 基本的には、管理者がVendorユーザを作って、詳細情報はそのVendorユーザが自分自身の情報を登録し、管理者がその登録内容を承認する、という流れのようで、そのためのステータス管理（Pending、Rejected、Suspended、）がされているという形のようです。 これを登録すると、 http://localhost/circlant/user1/ という形で、そのベンダーのページが作成されるのですが、そこに表示される画像はどこで設定するのかが分からない。追々分かることを期待して進めます。 ベンダー登録方法 Setting up – Vendor Registration for WCMp https://wc-marketplace.com/knowledgebase/setting-vendor-registration-wcmp/ ベンダーについては、より詳細な登録方法として、さらにドキュメントが提供されています。 管理者が登録する方法以外に、Registration Formも用意されており、それをするしない、承認を経由するしない、フォームで登録する内容、等が設定可能です。 例えば、Store DescriptionとCountry　を追加すると、このような登録フォームになります。 ベンダー用機能 Setting Up WCMp – A Vendor Guide https://wc-marketplace.com/knowledgebase/setting-wcmp-vendor-guide/ どうもドキュメントの並びが綺麗ではないように思うのですが、ベンダー登録したところで、今度は、ベンダー用機能を見てみます。 Vendorロールのユーザでwp管理画面にログインすると、ダッシュボードの見た目はだいぶ違います。 上に書いた、店舗画面の見た目等はここから設定することになります。 その他、商品や、支払い方法等を登録し、あるいは、注文情報の確認等を行いますが、ポイントは商品登録だと思いますので、今回はここで一旦終了します。

MagentoのDocker環境を作った訳ですが、サンプルデータを後から投入しようとすると、やはり、「PHP Fatal error: Allowed memory size of xxx bytes exhausted」が発生したりして、Dockerの出来合いの環境ならもう少しすんなり行くかなと言う期待は、あまり応えてはもらえませんでした。 そこで、ちょっと浮気をしてみます。 Docker力強化も兼ねて、今回もDocker環境を作ります。 WooCommerce入りのDocker Hubのイメージもありますが、そこは後からプラグイン入れても良いよね、ということでwordpress環境をまず作ります。 イメージは、あえて公式ではなく、先日の構成を参考にして、bitnami版にしてみます。 今回は、最初から、ymlに永続化用の記述をしておきます。 mkdir docker/WooCommerce mkdir docker/WooCommerce/wc-mariadb-persistence mkdir docker/WooCommerce/wc-wordpress-persistence cd docker/WooCommerce/ curl -LO https://raw.githubusercontent.com/bitnami/bitnami-docker-wordpress/master/docker-compose.yml ・・・yml編集・・・ docker-compose up -d やはり、wordpressセットアップ画面をすっ飛ばして、サイトが立ち上がっている状態まで来てくれます。 管理画面はwp-admin、ユーザ・パスワードは、Settings画面参照（WORDPRESS_USERNAME、WORDPRESS_PASSWORD）。 日本語化はされていません。 そして、おもむろに、Pluginsから、WooCommerceをInstall、Activate。PluginsのページにWelcome to WooCommerceのメッセージと「Run the Setup Wizard」ボタンが表示されているので、クリックします。 基本情報を入力し、Payment画面では、PayPalとstripe、さらにCash on deliveryを有効にしてみます。Shippingはとりあえず適当に、オススメのAutomated TaxesとMailChimpも有効にしておいて、Jetpackは接続できないというメッセージになりましたがそのまま行きます。 チュートリアルに従って商品登録し、「Visit Site」の下の「Visit Shop」をクリックすると、商品が表示され、カートに投入し、カートを見ると購入商品が表示されます。 ただ、この状態ではあまりに見た目が投げやりなので、AppearanceのThemesからStorefront を検索して、Install、Activateします。 「Design your store」という画面が表示されますので、流れに従って入力。多少見た目が整います。「Design your store」が公式のようなので入れてみましたが、なかなかのシンプルさではあります。 https://shimesan.com/2018/03/24/woocommerce-netshop-003/ この辺は参考になりそうです。 試しにもう一つ、THESHOPというテーマを入れてみます。 https://athemes.com/theme/theshop/# さすがの良い感じ。 とりあえず、こうしておきます。 さらに、今回やりたいのは単一ショップではないので、複数ベンダー対応のプラグイン、「WC Marketplace」を入れます。 そして、ちょっと設定を初めてみましたが、これはなかなか骨が折れそうなので、また改めて。

Dockerで、ビジュアルに、Magento環境を構築していきたいと思います。 参考情報 https://qiita.com/kzkiq2nd/items/29f69c156f6f6e2fb215 を入り口として、 https://qiita.com/kzkiq2nd/items/b8162cfc41d13616f861 https://principle-works.jp/blog/how2runm2ondocker-apache/ https://principle-works.jp/blog/how2runm2ondocker-compose/ も参照。 しつつ、いかにビジュアルに構築するかを考えます。 イメージ検索 まずは、Kitematic内で検索してみます。 最初は、一つしかヒットしなかった気がしたのですが、気のせい？？ まあまあ、結構な数がヒットします。 Googleで「magento docker」で検索した場合は、bitnami/magentoが先頭でヒットします。 さらに、DevBoxなるものもあるといいます。 どれを使うべきか。 DevBoxが正攻法のようではあります。 https://magento.com/blog/technical/set-your-magento-2-development-environment-faster が、最初の参考情報によると、ちょっとフルスペックすぎる感じが無きにしも非ず。 かつ、2.3には未対応っぽい。 次は、Pulls 1M+ となっていて、利用者の多そうなこちら。 https://hub.docker.com/r/alexcheng/magento2 解説も丁寧にされているのが好印象。2.3.xとも書いてあるので安心。 こちらにさらに情報あり。 https://microbadger.com/images/alexcheng/magento2 bitnami版も確認。 https://hub.docker.com/r/bitnami/magento 利点として書かれているのは、最新版追跡の速さですね。 こちらにも、いくつかのパターンが置かれています。 https://bitnami.com/stack/magento/containers ちょと悩むところではあるのですが、ブランド名を信じて、bitnamiにしてみます。 bitnami版magento2のインストール 改めて、Kitematicで「bitnami/magento」で検索し、CREATEボタンを押します。 しばらくダウンロード画面が表示され、追加されたかと思いきや、エラーメッセージ。 Welcome to the Bitnami magento container Subscribe to project updates by watching https://github.com/bitnami/bitnami-docker-magento Submit issues and feature requests at https://github.com/bitnami/bitnami-docker-magento/issues ERROR == The MAGENTO_DATABASE_PASSWORD environment variable is empty or not set. This environment variable is required for Magento to be properly installed.

目的 2018年11月にMagentoが2.3にバージョンアップしたため、その環境を作りたい。 しかし、現在AWSに構築している環境をバージョンアップするのは、素人には難しそう。そもそも、現状が綺麗にできていない気がするので、クリーンインストールすることにする。 そして、今後も複数バージョンをどう取り扱うか問題は出てくると思うので、このWordpressサイト構築にあたって興味を持ったDockerをもう少し突き詰めてみる。 考えること Dockerもコマンド打つだけじゃないでしょ、もっとビジュアルに行こうぜ！と思ったら、思いの外深い。 参考 https://yoshinorin.net/2017/08/30/try-docker-rancher/ まず、Docker for Macにするのか、Docker Toolboxにするのかを考えなければなりません。 一般的には、VirtualBoxが不要であるDocker for Macの方が、早い、ということのようです。 そして、実際のビジュアルツールとして、やはり本命はDocker社純正のKitematicと言うことになるかと思います。 ただ、上記参考サイトにあるように、これは「Docker for WindowsとDocker for Mac」用となるので、AWS等のLinux環境では同一環境にはならないと言うことになります。 もっとも、それは「外側」が異なるという話であり、Dockerで構築される「中身」については同じでしょうから、それは別の話として良いのかなと考え、Kitematicで構築することにしてみます。 なお、第二の選択肢として、Portainer、Rancherも興味深いです。 Kitematicのインストール 手順としては、Docker for Macをインストールし、そうすると、Dockerアイコンが表示されるようになるので、そこからKitematicをインストールするということのようです。 この辺が比較的新し目の情報かと思います。 https://yatteq.com/localdev-docker で、Docker for Macをダウンロードしに行くわけですが、そこの名前はDocker Desktop (Mac)。分かりにくくないですか？？ Dockerのアカウント登録をして、ダウンロードします。518MB、なかなかですね・・・ インストール方法は特筆すべきことはないですが、本家docsでも眺めておけば良いでしょう。 https://docs.docker.com/docker-for-mac/install/#install-and-run-docker-for-mac 丁寧な手順はこちらとか。 https://qiita.com/seijimomoto/items/357ac7aa84f98b96021f 最初、Docker アイコンからKitematicをクリックしても反応なく焦りましたが、再度アプリケーションフォルダからDockerをダブルクリックしたら反応してくれました。 ということで、インストールまでは、簡単に行きます。

[ ][1] Code4Startup Task26では、ドライバー側マップでドライバーの移動ロケーションを追加し、カスタマー側マップにも追加します。 そして、シミュレータを二つ立ち上げて、動きを見ることができますよと言うテクニック。 最後にTask27でdanielgindiのチャートコントロールを使ってグラフを表示します。 https://github.com/danielgindi/Charts と言うわけで完了！長かった・・・ ただ、完成まではしないのですね・・・ 例えば、ドライバーが配達完了すると、ステータスが変わる、と言うところは作りますが、その時のドライバー画面は白いままとか。 ともあれ、この画像でおめでとうと言われました！ https://www.google.com/search?q=congratulations!+gif&tbm=isch&tbs=rimg:Cf_126g8pSGmDIjj2cw58GhEDRb1Tm-QQfezqphKGfD1O0NL-e3qT_1YKO7LZvVAYaur8hA3bBucnHSIqfOWhf0o2EKyoSCfZzDnwaEQNFEaLGpRKdOq-YKhIJvVOb5BB97OoROM0rrFOchCUqEgmmEoZ8PU7Q0hGkQsPwogAEjSoSCf57epP9go7sEcYO1TRi5KJ5KhIJtm9UBhq6vyERQUG6cqDuGNMqEgkDdsG5ycdIihE6TOBfMSUADCoSCZ85aF_1SjYQrEe5Ue_1GH1SA_1&tbo=u&sa=X&ved=2ahUKEwiOhtjjxdXfAhXXAIgKHaCBBUsQ9C96BAgBEBs&biw=1765&bih=1034&dpr=2#imgrc=__bqDylIaYNUMM:

[][1] Code4Startup ここまでは、カスタマーサイドのアプリ。 Task24は、ドライバーサイドのアプリ。 このスピード感で画面を追加していける、というのがSwiftの強みだと思う。 そして、この段階で初めてCusotmerとDriverでディレクトリを分けていけるのもよい。 ということで、Task24がViewControllerで画面遷移のあたり。 Task25で、API部分で、注文のピックアップのあたり。 悩みながら、進めます。

Code4Startup Task23は、決済部分から、お店から配達先までの経路描画など、ある意味、講座のクライマックス。 経路は、import Mapkit しなければならないとすると、他の方式で開発する場合は、またちょっと苦労するということでしょうか。 画面作成の観点で、Swift最強だな、というのはひしひしと感じるわけですが、Android版も開発するとなった場合に、まるっきり別物の開発になってしまう、というのはやはり辛いなとも感じています。