Ranchar社からRanchar Desktopが登場しました。 公式サイトはこちら なんとなく、Docker Desktopの代わりになりそうに見えます。 Ranchar Desktopのインストール 公式のインストール手順はこちら。 Widnows、macOS、Linuxに対応しています。 特にWindowsについては Rancher Desktop requires Windows Subsystem for Linux on Windows; this will automatically be installed as part of the Rancher Desktop setup. Manually downloading a distribution is not necessary. とのことで、WSLの設定も勝手にやってくれるようです。 ただ、私の環境はすでにWSL2と、WSL2上のDockerが構築済みの状態です。 インストーラーを入手し、ウィザードに従ってインストールします。 Rancher Desktopを使ってみる 初回起動時にContainer Runtimeの選択ダイアログが出ます。WSL2上にDockerの環境を導入済みだからか、dockerd (moby)がデフォルトで選択されていました。 Acceptを押すと、Ranchar Desktopが起動します。 しれっと、Kubernetesがダウンロードされます。 画面を一通り眺めてみます Kubernetes Settings WSL Integration Port Forwarding Images Troubleshooting で、何ができるのかしら？ Windows環境でdockerコマンドが使えるぞ！ PS C:\> docker images REPOSITORY TAG IMAGE ID CREATED SIZE rancher/mirrored-library-traefik 2.5.6 2cd4bc25ad14 5 weeks ago 101MB rancher/local-path-provisioner v0.0.21 fb9b574e03c3 6 weeks ago 35MB rancher/mirrored-metrics-server v0.5.2 f73640fb5061 2 months ago 64.3MB rancher/klipper-lb v0.3.4 746788bcc27e 3 months ago 8.08MB rancher/klipper-helm v0.6.6-build20211022 194c895f8d63 3 months ago 241MB rancher/mirrored-coredns-coredns 1.8.6 a4ca41631cc7 3 months ago 46.8MB rancher/mirrored-pause 3.6 6270bb605e12 5 months ago 683kB PS C:\> まるでDocker Desktop！！ PS C:\> docker run hello-world Hello from Docker! This message shows that your installation appears to be working correctly. To generate this message, Docker took the following steps: 1. The Docker client contacted the Docker daemon. 2. The Docker daemon pulled the "hello-world" image from the Docker Hub. (amd64) 3. The Docker daemon created a new container from that image which runs the executable that produces the output you are currently reading. 4. The Docker daemon streamed that output to the Docker client, which sent it to your terminal. To try something more ambitious, you can run an Ubuntu container with: $ docker run -it ubuntu bash Share images, automate workflows, and more with a free Docker ID: https://hub.docker.com/ For more examples and ideas, visit: https://docs.docker.com/get-started/ まるでDocker Desktop！！ （hello-worldの実行はうまくいくのですが、実行中のままプロンプトが返ってきません。。なぜ？） Docker Composeもいける！！ PS C:\> docker compose Usage: docker compose [OPTIONS] COMMAND Docker Compose Options: --ansi string Control when to print ANSI control characters ("never"|"always"|"auto") (default "auto") --env-file string Specify an alternate environment file. -f, --file stringArray Compose configuration files --profile stringArray Specify a profile to enable --project-directory string Specify an alternate working directory (default: the path of the Compose file) -p, --project-name string Project name Commands: build Build or rebuild services convert Converts the compose file to platform's canonical format cp Copy files/folders between a service container and the local filesystem create Creates containers for a service. down Stop and remove containers, networks events Receive real time events from containers. exec Execute a command in a running container. images List images used by the created containers kill Force stop service containers. logs View output from containers ls List running compose projects pause pause services port Print the public port for a port binding. ps List containers pull Pull service images push Push service images restart Restart containers rm Removes stopped service containers run Run a one-off command on a service. start Start services stop Stop services top Display the running processes unpause unpause services up Create and start containers Run 'docker compose COMMAND --help' for more information on a command. PS C:\> まるでDocker Desktop！！ （細かい点ですが、docker-composeはだめでした。） Windows環境でkubectlコマンドが使えるぞ！ PS C:\> kubectl get services NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE kubernetes ClusterIP 10.43.0.1 <none> 443/TCP 10m PS C:\> まるでDocker Desktop！！ VSCodeのDocker拡張もいける まるでDocker Desktop！！ VSCodeのDev Containerもいける！！！ まるでDocker Desktop！！ （もう言うことはありません。大満足） ちなみに もともとあったWSL2の環境とは別モノのようで、rancher-desktopとrancher-desktop-dataが作成されています。 PS C:\> wsl -l -v NAME STATE VERSION * Ubuntu-20.04 Running 2 rancher-desktop-data Stopped 2 rancher-desktop Running 2 PS C:\> まるでDocker Desktop！！ いいんじゃないでしょうか！！

TL;DR; AKS始めよう！と思ったあなたに必要なツールをまとめてお届けします。 まずAzureなので、az さらにkubernetesといえば、kubectl localのdocker imageも操作できなきゃ駄目だよねということで、 docker おまけにパッケージ管理の helm 全てひとつのdocker imageに詰め込みました。 スクリプト一発実行すれば、全てインストール済のDocker imageが作成され、さらにAzureにログイン済みの状態になります。 便利ですよー。 準備 以下のリポジトリをcloneしてください。 おもむろに connect_aks.shをエディタで開き、SUBSCRIPTION, CLUSTER , RESOURCE_GROUP を自分の環境に合わせて修正してください。ちなみに、CLUSTER,RESOURCE_GROUPは存在しなくてもかまいません。※その場合あとで作る必要あります。 # Your subscription. SUBSCRIPTION=xxxxxxxxxxxxxxxxxxxxx # Your Cluster name CLUSTER=xxxxxxxxxxxxx # Your resource group RESOURCE_GROUP=xxxxxxxxxxxxxxx 開始 スクリプトを実行します。 ./connect_aks.sh 初回のみDocker imageのビルドが走ります。 Docker image がビルドされた後、az loginが実行されます。結果として、ブラウザでのログインを促されます。 To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code XXXXXX to authenticate. ターミナルに表示されている認証用コードを入力して次へ。 Azureへのログイン情報を入力するとAzure CLIにサインインするか確認されます。 続行すると認証されます。 これで、az,docker,kubectl, helm が使えるようになっています。 Welcome to fish, the friendly interactive shell Type `help` for instructions on how to use fish root@aks /work (main)# which az /usr/bin/az root@aks /work (main)# which docker /usr/bin/docker root@aks /work (main)# which kubectl /usr/local/bin/kubectl root@aks /work (main)# which helm /usr/sbin/helm Let's enjoy AKS! ちなみにAKSは以下のあたりから始めるとよさそうです。 チュートリアル:Azure Kubernetes Service (AKS) クラスターのデプロイ https://docs.microsoft.com/ja-jp/azure/aks/tutorial-kubernetes-deploy-cluster?tabs=azure-cli

はじめに CI/CDの勉強をしている中でCodeDeployのBlue/Greenにチャレンジしました。 その中で、デプロイが終わらない事態が発生したのでまとめたいと思います。 ネットやTwitterにも同じ現象で悩んでいる人がいますが、解決策というような解決策の記事がまとめられていなかったので誰かの助けになればと思います。 問題 CodeDeployでBlue/Greenデプロイをすると上の状態で止まる。 本来であれば数分で終わるらしいので何かがおかしいと思い調べました。 ネットの記事にはtaskdef.jsonが間違っていたというのもありますが、今回はそれに該当しなさそうでした。 また、検証もログが出力されないので難しいです。 解決方法 この問題は以下の2つの原因があるかと思われます。 1. コンテナに問題がある コンテナが起動できない場合はそもそもデプロイに成功しないため待ち状態になってしまいます。 そこで、利用するイメージが正しく動くかをFargateのローリングアップなどで実際に起動してアクセスできるか確認してみてください。 また、Blue/Greenデプロイしている状態でもうまく立ち上がっていれば、2つのポート(80、8080)でコンテナが起動しているはずですので、プライベートIPからアクセスして確認することができます。 もし、ここでアクセスできない状態ならローリングアップなどで起動してCloudWatchのログを見ながら修正していく必要があります。 2. ロードバランサーが正しくアクセスできていない 以下の記事を見つけました。 AWS CodePipeline "An AppSpec file is required, but could not be found in the revision" この記事によるとロードバランサーのHealth Checkが関係しているようでした。 そこでロードバランサーのターゲットグループのヘルスチェックを確認すると Health check path: / となっていました。しかし、私が作成したRailsアプリは/test以外は404になるように設定されていました。 ヘルスチェックをしたときに200 OKが返ってこないのでロードバランサーがヘルスチェックで止まってしまっていたのが原因でした。 また、途中で止まって失敗したときにロールバックを行わなかったことで余計なターゲットが追加されていたのも原因だったかもしれません。ヘルスチェックが正しい場合は、ロードバランサー、ターゲットグループ、ECSサービスのタスクを再度1から作成するのもよいかもしれないです。 おわりに CodeDeployでRails(Docker)をBlue/Greenデプロイする (CI/CDまでの道⑨) こちらの記事でCI/CDの方法については解説していますのであわせて参考にしてください。 やはりできる人が少ない分野になってくるとネットに情報がなくて原因を理解するのに時間がかかりますね。 参考 AWS CodePipeline "An AppSpec file is required, but could not be found in the revision"

はじめに 先月は特にメモするような話題がなかったので2か月ぶりのメモ記事です。 案外自分でみることが多く、役立っているこのシリーズですが、他の人に見られることはほぼないと思ってはいます(調べればわかることをメモしてるだけです) 今月から案件のサポートとして参加することになりすこしずつわからないこともでてくるようになりました。 問題 1. VPN接続している際に(在宅)WSL2でgit cloneができない 以下の記事の通りに対処することで解決 https://zenn.dev/mallowlabs/articles/ssh-on-wsl2-with-vpn 前も同じようなところで詰まっていました。.bashrcなどに書いて毎度実行するほうが良いかもしれないです。 2. SageMakerのドメインが削除できない ユーザープロファイルを削除したのにドメイン削除ボタンが押せない。 コンテナイメージをアタッチしたエラーがずっと表示されておりそれが原因かもしれない。 以下のコマンドでCLIから削除したところ削除できた $ aws sagemaker delete-domain --domain-id [ドメインID] --region [リージョン(ap-northeast-1など)] 3. Access denied for user 'root'がでてしまう MySQLで接続できないエラーが発生 まさかのwebpackerコンテナからrails db:createしていた。 また、database.ymlのusernameをrootにしていなかったのもあった 4. Railsで複数選択可能なチェックボックスの作成 以下の記事を参考に作成した 【Rails入門説明書】checkboxについて解説 Railsで複数check_boxを配列で送って、カラムに登録、viewで表示して、checkedもつける方法 checkboxでmultipleをつけると配列で値を受け取れるが、params.requireで値を取るとnilになってしまうところで苦戦した。 結果以下の箇所を修正することでできるようにした。 test.html.erb <div class='d-inline text-nowrap ml-1'> <label class='fw-normal'> <%= f.check_box :color, {multiple: true}, '青色', nil %> 青色 </label> </div> <div class='d-inline text-nowrap ml-1'> <label class='fw-normal'> <%= f.check_box :color, {multiple: true}, '黄色', nil %> 黄色 </label> </div> test.controller def notebook_params notebook_params = params.require(:notebook).require(:size, :width) notebook_params[:color] = params.require(:notebook).permit({:color => []})[:color] notebook.rb(model) serialize :color, Array before_save do self.color.split(',').map{ |m| m.delete('[]"\\')} if attribute_present?("color") end これで配列にして保存ができる。パラメータの取り方が特殊になるらしい 5. ./bin/webpack-dev-server: Permission deniedが時々起きる (chmod・chownが効かない) なぜかファイルが権限で読み込めなくなる現象が時々おきる。一回治ると以降起きないが、Gitからダウンロードしたときにコンテナをあげると起きたり、起きなかったり。 Dockerfileでchmod +x ./bin/webpacker-dev-serverをしても同じエラーがでてしまいchown, chmodが効いていない これはローカルにある./bin/webpacker-dev-serverで上書きされてしまうために起きていて、そのファイルはなぜか読み込める権限がなかった。 これはWSL2のフォルダをデスクトップにダウンロードしてからWSL2に再度戻したことにより権限が変わっていたことが原因でした。Gitに上げる前に権限を変更してあげないとCloneした人も同じ現象が起きてしまうので注意が必要 おわりに 本当は来月から１年出張しにくはずでしたが、コロナで完全リモートになりました。 来月も引き続きAWSとWeb技術頑張ります。 参考 WSL2 内の Ubuntu 20.04 で VPN をつないだときだけ ssh できない 【保存版】Docker上に構築したRails6でVue.jsを表示する方法（エラー対処法＆Vuetifyの使い方） 【Rails入門説明書】checkboxについて解説 Railsで複数check_boxを配列で送って、カラムに登録、viewで表示して、checkedもつける方法

はじめに 特定ユーザーに対する Docker の有料価が始まりましたが、それに先立って 2020 年ごろから Docker Hub のコンテナに対するプル要求数の制限がアカウント毎に行われています。 制限の発表当初は無料、匿名ユーザーは 6 時間当たり 5,000 プル要求の制限が掛かっていましたが、2022 年 2 月現在では価格表 にも記載がある通り、下記の通りの制限になっているようです。 匿名ユーザー：6 時間当たり 100 プル要求 無料(Personal)ユーザー：6 時間あたり 200 プル要求 Pro, Team, Business：24 時間当たり 50,000 プル要求 この記事では、改めて Docker Hub のプル要求数の制限がどのようなものなのかを確認していきます。 ダウンロード制限の定義 Docker のダウンロード制限に関するドキュメント を確認すると、ダウンロード制限について次のような定義が乗っています。 プル要求は、レジストリマニフェスト URL（GET/v2//manifests/）に対する最大 2 つのリクエストとして定義されます。 通常のイメージのプルでは、1 つのマニフェスト要求が行われます。 マルチアーチイメージのプルリクエストは、2 つのマニフェストリクエストを行います。 HEAD リクエストはカウントされません。。 基本的には 1 イメージ 1 要求として考えれば良いようです。 現在の状況を確認する 次のようにアクセストークン取得後に何かしらのマニフェストファイルを取得すると、レスポンスヘッダーから現在の上限(ratelimit-limit)と利用状況(ratelimit-remaining)を確認できます。 $ TOKEN=$(curl --user 'username:password' "https://auth.docker.io/token?service=registry.docker.io&scope=repository:ratelimitpreview/test:pull" | jq -r .token) $ curl --head -H "Authorization: Bearer $TOKEN" https://registry-1.docker.io/v2/ratelimitpreview/test/manifests/latest HTTP/1.1 200 OK content-length: 2782 content-type: application/vnd.docker.distribution.manifest.v1+prettyjws docker-content-digest: sha256:767a3815c34823b355bed31760d5fa3daca0aec2ce15b217c9cd83229e0e2020 docker-distribution-api-version: registry/2.0 etag: "sha256:767a3815c34823b355bed31760d5fa3daca0aec2ce15b217c9cd83229e0e2020" date: Mon, 31 Jan 2022 23:48:06 GMT strict-transport-security: max-age=31536000 ratelimit-limit: 200;w=21600 ratelimit-remaining: 188;w=21600 docker-ratelimit-source: 12cc3a69-4489-446c-873c-xxxxxxxxxxxx docker-ratelimit-source でプル数の上限を管理しているようです。匿名ユーザーの場合はこの値が接続元の IP アドレスになり、Docker Hub のユーザーでログインしている場合はユーザー毎、サイクル？毎 GUID が割り振られるようです。 現在のユーザーは、6 時間当たり 200 回の制限が掛かっていて、のこり 188 回のプル要求が許されているのが分かります。この状態で mysql のコンテナを一つプルしたとしたらどうなるのでしょうか。 $ docker pull mysql Using default tag: latest latest: Pulling from library/mysql 6552179c3509: Already exists d69aa66e4482: Already exists 3b19465b002b: Already exists 7b0d0cfe99a1: Already exists 9ccd5a5c8987: Already exists 2dab00d7d232: Already exists 64d3afdccd4a: Already exists 82148d50b16c: Pull complete 8bb7d73a7d0c: Pull complete 74778cd68a75: Pull complete d7e5f9309140: Pull complete f2e376ecd59f: Pull complete Digest: sha256:92d27b8222bbcf53bc42c70ca7cd1010d6c0527efc61f14980ce77c50932bef4 Status: Downloaded newer image for mysql:latest docker.io/library/mysql:latest $ curl --head -H "Authorization: Bearer $TOKEN" https://registry-1.docker.io/v2/ratelimitpreview/test/manifests/latest HTTP/1.1 200 OK ... 略 ... ratelimit-limit: 200;w=21600 ratelimit-remaining: 187;w=21600 docker-ratelimit-source: 12cc3a69-4489-446c-873c-xxxxxxxxxxxx ratelimit-remaining の値が 1 つ減って 187 になりましたね。 マルチアーキテクチャなコンテナイメージをプルする場合は 2 つ要求を消費するということなので、amazonlinux をアーキテクチャ指定なしでプルしてみます。 $ docker pull amazonlinux:latest latest: Pulling from library/amazonlinux 3a461b3ae562: Pull complete Digest: sha256:ffc013f79b36a2c0352b444f5322ff43de25152a8ac1ad0fa473e90f1cbedcbe Status: Downloaded newer image for amazonlinux:latest docker.io/library/amazonlinux:latest docker-ratelimit-source: 12cc3a69-4489-446c-873c-xxxxxxxxxxxx ちゃんと 2 つ減っていますね。 $ curl --head -H "Authorization: Bearer $TOKEN" https://registry-1.docker.io/v2/ratelimitpreview/test/manifests/latest HTTP/1.1 200 OK ... 略 ... ratelimit-limit: 200;w=21600 ratelimit-remaining: 185;w=21600 docker-ratelimit-source: 12cc3a69-4489-446c-873c-xxxxxxxxxxxx 一度イメージを削除して、今度はアーキテクチャ指定でプルしてみます。 $ docker rmi amazonlinux Untagged: amazonlinux:latest Untagged: amazonlinux@sha256:ffc013f79b36a2c0352b444f5322ff43de25152a8ac1ad0fa473e90f1cbedcbe Deleted: sha256:30156a0e4f040d255f30a8bf0b28540fce965398fe1c13ab29a7292e411dfde7 Deleted: sha256:4f765311acacb07fadae2ddcee2aa02ba56feb2f676f181adec48d215dd63663 $ docker pull amd64/amazonlinux:latest latest: Pulling from amd64/amazonlinux 3a461b3ae562: Pull complete Digest: sha256:9c4e7b374a7a9253764876520d867ba1f5bfddeed82b029b5054cce0f71faf20 Status: Downloaded newer image for amd64/amazonlinux:latest docker.io/amd64/amazonlinux:latest 今度は 1 つ減りました。 $ curl --head -H "Authorization: Bearer $TOKEN" https://registry-1.docker.io/v2/ratelimitpreview/test/manifests/latest HTTP/1.1 200 OK ... 略 ... ratelimit-limit: 200;w=21600 ratelimit-remaining: 184;w=21600 docker-ratelimit-source: 12cc3a69-4489-446c-873c-xxxxxxxxxxxx 消して、プルしてを繰り返してリミットまでプルしてみます。 $ curl --head -H "Authorization: Bearer $TOKEN" https://registry-1.docker.io/v2/ratelimitpreview/test/manifests/latest ... 略 ... ratelimit-limit: 200;w=21600 ratelimit-remaining: 0;w=21600 docker-ratelimit-source: 12cc3a69-4489-446c-873c-xxxxxxxxxxxx $ docker pull amazonlinux Using default tag: latest Error response from daemon: toomanyrequests: You have reached your pull rate limit. You may increase the limit by authenticating and upgrading: https://www.docker.com/increase-rate-limit tomanyrequest ではじかれましたね。 匿名ユーザーのリミット 匿名ユーザーでトークンを取得すると、レスポンスヘッダーの docker-ratelimit-source が IP アドレスになっていることを確認できます。 上限も少なくなっているので、同一ネットワーク内に匿名ユーザーが複数いる場合はすぐに上限に達してしまいそうですね。 $ TOKEN=$(curl "https://auth.docker.io/token?service=registry.docker.io&scope=repository:ratelimitpreview/test:pull" | jq -r .token) $ curl --head -H "Authorization: Bearer $TOKEN" https://registry-1.docker.io/v2/ratelimitpreview/test/manifests/latest HTTP/1.1 200 OK content-length: 2782 content-type: application/vnd.docker.distribution.manifest.v1+prettyjws docker-content-digest: sha256:767a3815c34823b355bed31760d5fa3daca0aec2ce15b217c9cd83229e0e2020 docker-distribution-api-version: registry/2.0 etag: "sha256:767a3815c34823b355bed31760d5fa3daca0aec2ce15b217c9cd83229e0e2020" date: Tue, 01 Feb 2022 03:04:11 GMT strict-transport-security: max-age=31536000 ratelimit-limit: 100;w=21600 ratelimit-remaining: 96;w=21600 docker-ratelimit-source: 133.200.192.128 有料ユーザーのリミット 有料ユーザー(Pro, Team, Business)の場合、ratelimit-limit と ratelimit-remaining がレスポンスヘッダーに含まれなくなります。一応 24 時間で 50,000 回という制限はあるはずなのですが、匿名や無料ユーザーのように厳密には管理されないのかもしれませんね。 $ curl --head -H "Authorization: Bearer $TOKEN" https://registry-1.docker.io/v2/ratelimitpreview/test/manifests/latest HTTP/1.1 200 OK content-length: 2782 content-type: application/vnd.docker.distribution.manifest.v1+prettyjws docker-content-digest: sha256:767a3815c34823b355bed31760d5fa3daca0aec2ce15b217c9cd83229e0e2020 docker-distribution-api-version: registry/2.0 etag: "sha256:767a3815c34823b355bed31760d5fa3daca0aec2ce15b217c9cd83229e0e2020" date: Tue, 01 Feb 2022 03:14:48 GMT strict-transport-security: max-age=31536000 docker-ratelimit-source: 2cbba8b1-5b0d-46e7-bde2-xxxxxxxxxxxx まとめ 制限の対象はレイヤー数ではなく、あくまでイメージ数です。 CI などで頻繁にイメージをプルする場合は有料アカウントを利用したほうが良いと思いますが、個人の開発端末の上で利用する場合は無料アカウントを利用すれば大きな問題にはならないでしょう。

はじめに 今回は、Laravel8をメインとして、その中でVue3を使う環境の構築方法をご紹介します。 環境 Docker version 20.10.12 Docker Compose version v2.2.3 Laravel Framework 8.81.0 Vue 3.2.29 構成 以下の構成を想定しています。 project ├── environment │   └── development │   ├── docker │   │   ├── mysql │   │   │   ├── Dockerfile │   │   │   ├── my.cnf │   │   │   └── sql │   │   │   └── create-database.sql │   │   ├── nginx │   │   │   └── default.conf │   │   ├── node │   │   │   └── Dockerfile │   │   └── php │   │   ├── Dockerfile │   │   └── php.ini │   └── docker-compose.yml └── server 構築 1. 全体(Docker) 1-1. docker-compose.yml作成 今回は、PHP, nginx, mysql, nodeの4つのコンテナを想定しておりますので、以下のようになります。 docker-compose.yml version: '3.9' services: php: container_name: php build: docker/php volumes: - ./../../server:/var/www:cached node: container_name: node build: docker/node volumes: - ./../../server:/project:cached tty: true # command: bash -c " # npm install; # npm run watch; # " nginx: image: nginx container_name: nginx ports: - 80:80 volumes: - ./../../server:/var/www:cached - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:cached depends_on: - php - node mysql: build: docker/mysql container_name: mysql environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: sample TZ: 'Asia/Tokyo' command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci restart: on-failure volumes: - mysql:/var/lib/mysql:cached - ./docker/mysql/sql:/docker-entrypoint-initdb.d:cached ports: - 3306:3306 volumes: mysql: 1-2. PHP Dockerfile作成 phpコンテナ構築時に使われるDockerfileをdocker/php/に作成します。 Dockerfile FROM php:8.0-fpm COPY php.ini /usr/local/etc/php/ RUN apt-get update \ && apt-get install -y zlib1g-dev libzip-dev mariadb-client libpng-dev unzip RUN docker-php-ext-install zip pdo_mysql gd #Composer install COPY --from=composer:latest /usr/bin/composer /usr/bin/composer ENV COMPOSER_ALLOW_SUPERUSER 1 ENV COMPOSER_HOME /composer ENV PATH $PATH:/composer/vendor/bin WORKDIR /var/www RUN composer global require "laravel/installer" PHP設定ファイル作成 PHPの設定ファイルをdocker/php/に作成します。以下、最低限の設定ですのでプロジェクトに応じて変更してください。 php.ini zend.exception_ignore_args = off expose_php = on max_execution_time = 60 max_input_vars = 1000 upload_max_filesize = 64M post_max_size = 128M memory_limit = 256M error_reporting = E_ALL display_errors = on display_startup_errors = on log_errors = on error_log = /dev/stderr default_charset = UTF-8 [Date] date.timezone = "Asia/Tokyo" [mbstring] mbstring.language = "Japanese" 1-3. nginx 設定ファイル作成 niginxの設定ファイルをdocker/nginx直下に作成します。以下はLaravelでの運用を前提に記載しています。 default.conf server { listen 80; root /var/www/public; index index.php; location / { try_files $uri $uri/ /index.php$is_args$args; } location ~ \.php$ { fastcgi_split_path_info ^(.+\.php)(/.+)$; fastcgi_pass php:9000; fastcgi_index index.php; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; } } 1-4. MySQL Dockerfile FROM mysql:8 COPY my.cnf /etc/mysql/conf.d/ RUN chmod 644 /etc/mysql/conf.d/my.cnf 設定ファイル my.cnf [mysqld] character-set-server=utf8mb4 collation-server=utf8mb4_unicode_ci [client] default-character-set=utf8mb4 SQL docker/mysql/sql/create-database.sqlにてデータベースを作成するSQLを用意します。 CREATE DATABASE IF NOT EXISTS sample CREATE DATABASE IF NOT EXISTS sample_test 1-5. Node Dockerfile FROM node:16.0.0 WORKDIR /project RUN npm install -g agentkeepalive --save RUN npm install -g npm@8.4.0 RUN npm cache clean -f 1-6. Docker起動 dockerを起動して、Laravelプロジェクトを作成してみましょう。 docker-compose.ymlがあるディレクトリに移動して下記でdockerを起動してみましょう。 cd environment/development docker-compose up -d 2. Laravel 2-1. プロジェクト作成 コンテナに入って、Laravelプロジェクトを作成します。 cd environment/development # phpコンテナに入ります docker-compose exec php bash # Laravelプロジェクト作成 composer create-project --prefer-dist laravel/laravel ./ server以下にLaravelの各ディレクトリやファイルができています。 2-2. 動作確認 ブラウザからlocalhostにアクセスしてみましょう。以下のようにLaravelの画面が立ち上がっていれば成功です。 3. MySQL MySQLのコンテナへ接続しましょう。 3-1. .env設定 MySQLコンテナ及びデータベースへの接続情報を.envに記載します。 DB_CONNECTION=mysql DB_HOST=mysql DB_PORT=3306 DB_DATABASE=sample DB_USERNAME=root DB_PASSWORD=root 3-2. マイグレーションの実行 cd environment/development # phpコンテナに入ります docker-compose exec php bash # マイグレーションの実行 root@de1e51270b2b:/var/www# php artisan migrate Migration table created successfully. Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table (38.74ms) Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table (26.03ms) Migrating: 2019_08_19_000000_create_failed_jobs_table Migrated: 2019_08_19_000000_create_failed_jobs_table (29.34ms) Migrating: 2019_12_14_000001_create_personal_access_tokens_table Migrated: 2019_12_14_000001_create_personal_access_tokens_table (40.38ms) 4. Vue 4-1. Vueインストール cd environment/development # nodeコンテナに入る docker-compose exec node bash # vueをインストール npm install vue@next vue-loader@next @vue/compiler-sfc 4-2. webpack.min.jsを修正 下記のようにvue()を追加します。 server/webpack.mix.js mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ // ]).vue(); 4-3. Vueコンポーネント作成 server/resources/jsの配下にcomponentsのディレクトリを作成して、resources/js/components/TestVue.vueを作成します。 server/resources/js/components/TestVue.vue <template> Hello Vue !! </template> <script> import { onMounted } from 'vue' export default ({ setup() { console.log("start vue") onMounted(() => { console.log('start mounted !') }) }, }) </script> 4-4. Vueのマウント server/resources/js/app.jsを下記のように編集します。 server/resources/js/app.js require('./bootstrap'); import { createApp } from 'vue' import TestVue from './components/TestVue.vue'; const app = createApp({}) app.component('test-vue', TestVue); app.mount('#app') 4-5. ビルド cd environment/development docker-compose exec node bash -c "npm run dev" 4-6. Laravelビューファイルを作成する server/resources/views/app.blade.phpを作成します。 server/resources/views/app.blade.php <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet"/> <script src="{{ asset('js/app.js') }}" defer="defer"></script> </head> <body> <div id="app"> <test-vue></test-vue> </div> </body> </html> 4-7. Laravelのルーティング修正 server/routes/web.phpを以下のように修正します。 Route::get('/', function () { return view('app'); }); 4-8. Laravelキャッシュクリア 上記の手順で一度ビューやルーティングのキャッシュファイルが作成されていますので、以下のコマンドでキャッシュクリアしましょう。（不要なものも含まれていますが。。。） cd environment/development docker-compose exec php bash -c " php artisan cache:clear && php artisan config:clear && php artisan config:cache && php artisan route:clear && php artisan view:clear && php artisan clear-compiled && php artisan optimize && composer dump-autoload && rm -f bootstrap/cache/config.php" 4-9. 動作確認 おまけ nodeコンテナのコマンドのコメントアウトを外すと、ファイル変更のたびにnpm run devをする必要がなくなるので開発は楽になります！ docker-compose.yml version: '3.9' services: php: container_name: php build: docker/php volumes: - ./../../server:/var/www:cached node: container_name: node build: docker/node volumes: - ./../../server:/project:cached tty: true command: bash -c " npm install; npm run watch; " nginx: image: nginx container_name: nginx ports: - 80:80 volumes: - ./../../server:/var/www:cached - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:cached depends_on: - php - node mysql: build: docker/mysql container_name: mysql environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: sample TZ: 'Asia/Tokyo' command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci restart: on-failure volumes: - mysql:/var/lib/mysql:cached - ./docker/mysql/sql:/docker-entrypoint-initdb.d:cached ports: - 3306:3306 volumes: mysql: Laravel Mixで環境に合わせて出力ファイルを変える方法 Laravel Mixを利用する場合に、本番環境と開発環境で出力されるJSファイルやCSSファイルを分けたいと思います。 その方法については、以下の記事で紹介しています。 詳細 おわりに SPAはSEOに弱いということで、SSRで構築することがありますが、個人的にはかなり構築しづらかったので、SEOこだわるなら今回紹介した構成でいいのでは？と、思っていますがみなさんはいかがでしょうか？ 成果物はGithubにありますので、必要な方はご覧ください。 参考 LaravelでVue.js(v3)を使う方法！

はじめに 今回は、Laravel8をメインとして、その中でVue3を使う環境の構築方法をご紹介します。 環境 Docker version 20.10.12 Docker Compose version v2.2.3 Laravel Framework 8.81.0 Vue 3.2.29 構成 以下の構成を想定しています。 project ├── environment │   └── development │   ├── docker │   │   ├── mysql │   │   │   ├── Dockerfile │   │   │   ├── my.cnf │   │   │   └── sql │   │   │   └── create-database.sql │   │   ├── nginx │   │   │   └── default.conf │   │   ├── node │   │   │   └── Dockerfile │   │   └── php │   │   ├── Dockerfile │   │   └── php.ini │   └── docker-compose.yml └── server 構築 1. 全体(Docker) 1-1. docker-compose.yml作成 今回は、PHP, nginx, mysql, nodeの4つのコンテナを想定しておりますので、以下のようになります。 docker-compose.yml version: '3.9' services: php: container_name: php build: docker/php volumes: - ./../../server:/var/www:cached node: container_name: node build: docker/node volumes: - ./../../server:/project:cached tty: true # command: bash -c " # npm install; # npm run watch; # " nginx: image: nginx container_name: nginx ports: - 80:80 volumes: - ./../../server:/var/www:cached - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:cached depends_on: - php - node mysql: build: docker/mysql container_name: mysql environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: sample TZ: 'Asia/Tokyo' command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci restart: on-failure volumes: - mysql:/var/lib/mysql:cached - ./docker/mysql/sql:/docker-entrypoint-initdb.d:cached ports: - 3306:3306 volumes: mysql: 1-2. PHP Dockerfile作成 phpコンテナ構築時に使われるDockerfileをdocker/php/に作成します。 Dockerfile FROM php:8.0-fpm COPY php.ini /usr/local/etc/php/ RUN apt-get update \ && apt-get install -y zlib1g-dev libzip-dev mariadb-client libpng-dev unzip RUN docker-php-ext-install zip pdo_mysql gd #Composer install COPY --from=composer:latest /usr/bin/composer /usr/bin/composer ENV COMPOSER_ALLOW_SUPERUSER 1 ENV COMPOSER_HOME /composer ENV PATH $PATH:/composer/vendor/bin WORKDIR /var/www RUN composer global require "laravel/installer" PHP設定ファイル作成 PHPの設定ファイルをdocker/php/に作成します。以下、最低限の設定ですのでプロジェクトに応じて変更してください。 php.ini zend.exception_ignore_args = off expose_php = on max_execution_time = 60 max_input_vars = 1000 upload_max_filesize = 64M post_max_size = 128M memory_limit = 256M error_reporting = E_ALL display_errors = on display_startup_errors = on log_errors = on error_log = /dev/stderr default_charset = UTF-8 [Date] date.timezone = "Asia/Tokyo" [mbstring] mbstring.language = "Japanese" 1-3. nginx 設定ファイル作成 niginxの設定ファイルをdocker/nginx直下に作成します。以下はLaravelでの運用を前提に記載しています。 default.conf server { listen 80; root /var/www/public; index index.php; location / { try_files $uri $uri/ /index.php$is_args$args; } location ~ \.php$ { fastcgi_split_path_info ^(.+\.php)(/.+)$; fastcgi_pass php:9000; fastcgi_index index.php; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; } } 1-4. MySQL Dockerfile FROM mysql:8 COPY my.cnf /etc/mysql/conf.d/ RUN chmod 644 /etc/mysql/conf.d/my.cnf 設定ファイル my.cnf [mysqld] character-set-server=utf8mb4 collation-server=utf8mb4_unicode_ci [client] default-character-set=utf8mb4 SQL docker/mysql/sql/create-database.sqlにてデータベースを作成するSQLを用意します。 CREATE DATABASE IF NOT EXISTS sample CREATE DATABASE IF NOT EXISTS sample_test 1-5. Node Dockerfile FROM node:16.0.0 WORKDIR /project RUN npm install -g agentkeepalive --save RUN npm install -g npm@8.4.0 RUN npm cache clean -f 1-6. Docker起動 dockerを起動して、Laravelプロジェクトを作成してみましょう。 docker-compose.ymlがあるディレクトリに移動して下記でdockerを起動してみましょう。 cd environment/development docker-compose up -d 2. Laravel 2-1. プロジェクト作成 コンテナに入って、Laravelプロジェクトを作成します。 cd environment/development # phpコンテナに入ります docker-compose exec php bash # Laravelプロジェクト作成 composer create-project --prefer-dist laravel/laravel ./ server以下にLaravelの各ディレクトリやファイルができています。 2-2. 動作確認 ブラウザからlocalhostにアクセスしてみましょう。以下のようにLaravelの画面が立ち上がっていれば成功です。 3. MySQL MySQLのコンテナへ接続しましょう。 3-1. .env設定 MySQLコンテナ及びデータベースへの接続情報を.envに記載します。 DB_CONNECTION=mysql DB_HOST=mysql DB_PORT=3306 DB_DATABASE=sample DB_USERNAME=root DB_PASSWORD=root 3-2. マイグレーションの実行 cd environment/development # phpコンテナに入ります docker-compose exec php bash # マイグレーションの実行 root@de1e51270b2b:/var/www# php artisan migrate Migration table created successfully. Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table (38.74ms) Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table (26.03ms) Migrating: 2019_08_19_000000_create_failed_jobs_table Migrated: 2019_08_19_000000_create_failed_jobs_table (29.34ms) Migrating: 2019_12_14_000001_create_personal_access_tokens_table Migrated: 2019_12_14_000001_create_personal_access_tokens_table (40.38ms) 4. Vue 4-1. Vueインストール cd environment/development # nodeコンテナに入る docker-compose exec node bash # vueをインストール npm install vue@next vue-loader@next @vue/compiler-sfc 4-2. webpack.min.jsを修正 下記のようにvue()を追加します。 mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ // ]).vue(); 4-3. Vueコンポーネント作成 resources/jsの配下にcomponentsのディレクトリを作成して、resources/js/components/TestVue.vueを作成します。 <template> Hello Vue !! </template> <script> import { onMounted } from 'vue' export default ({ setup() { console.log("start vue") onMounted(() => { console.log('start mounted !') }) }, }) </script> 4-4. Vueのマウント resources/js/appを下記のように編集します。 require('./bootstrap'); import { createApp } from 'vue' import TestVue from './components/TestVue.vue'; const app = createApp({}) app.component('test-vue', TestVue); app.mount('#app') 4-5. ビルド cd environment/development docker-compose exec node bash -c "npm run dev" 4-6. Laravelビューファイルを作成する <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <script src="{{ asset('js/app.js') }}" defer="defer"></script> </head> <body> <div id="app"> <test-vue></test-vue> </div> </body> </html> 4-7. Laravelのルーティング修正 server/routes/web.phpを以下のように修正します。 Route::get('/', function () { return view('app'); }); 4-8. Laravelキャッシュクリア 上記の手順で一度ビューやルーティングのキャッシュファイルが作成されていますので、以下のコマンドでキャッシュクリアしましょう。（不要なものも含まれていますが。。。） cd environment/development docker-compose exec php bash -c " php artisan cache:clear && php artisan config:clear && php artisan config:cache && php artisan route:clear && php artisan view:clear && php artisan clear-compiled && php artisan optimize && composer dump-autoload && rm -f bootstrap/cache/config.php" 4-9. 動作確認 おまけ nodeコンテナのコマンドのコメントアウトを外すと、ファイル変更のたびにnpm run devをする必要がなくなるので開発は楽になります！ docker-compose.yml version: '3.9' services: php: container_name: php build: docker/php volumes: - ./../../server:/var/www:cached node: container_name: node build: docker/node volumes: - ./../../server:/project:cached tty: true command: bash -c " npm install; npm run watch; " nginx: image: nginx container_name: nginx ports: - 80:80 volumes: - ./../../server:/var/www:cached - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:cached depends_on: - php - node mysql: build: docker/mysql container_name: mysql environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: sample TZ: 'Asia/Tokyo' command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci restart: on-failure volumes: - mysql:/var/lib/mysql:cached - ./docker/mysql/sql:/docker-entrypoint-initdb.d:cached ports: - 3306:3306 volumes: mysql: おわりに SPAはSEOに弱いということで、SSRで構築することがありますが、個人的にはかなり構築しづらかったので、SEOこだわるなら今回紹介した構成でいいのでは？と、思っていますがみなさんはいかがでしょうか？ 成果物はGithubにありますので、必要な方はご覧ください。 参考 LaravelでVue.js(v3)を使う方法！