EC2上にLaravel sailでdevContainer的なアレ

mocotech

2023年8月17日 09:54

いやまあ、ここ最近めっちゃ攻めてるけど、vscodeとかもあんま使った事ないからね？まあ環境整備できましたって程度のもんで。

EC2の準備

とりあえずt4g.smallでdebian 。いつの間にやらbookwormなんすね。なんとなくarm

ちなみになんですが、このbookwormなイメージは何か再起動しないとdockerdが起動しませんでしたw。まあ新しいイメージだとそんな事もあるかね。

docker-compose入れる。phpは入れない

debianのstableでもphp8.2が入る時代なんです「が」まあ入れずに頑張ってみまーす。何となく日本語localeに切り替えとります。

$ sudo apt install docker-compose
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています... 完了
状態情報を読み取っています... 完了
以下の追加パッケージがインストールされます:
  binutils binutils-aarch64-linux-gnu binutils-common cgroupfs-mount
  containerd criu docker.io git git-man libbinutils libctf-nobfd0 libctf0
  liberror-perl libgdbm-compat4 libgprofng0 libintl-perl libintl-xs-perl
  libjansson4 libmodule-find-perl libmodule-scandeps-perl libnet1 libnftables1
  libnl-3-200 libperl5.36 libproc-processtable-perl libprotobuf32
  libsort-naturally-perl libterm-readkey-perl needrestart patch perl
  perl-modules-5.36 python3-distutils python3-docker python3-dockerpty
  python3-docopt python3-dotenv python3-lib2to3 python3-protobuf
  python3-texttable python3-websocket runc tini
提案パッケージ:
  binutils-doc containernetworking-plugins docker-doc aufs-tools btrfs-progs
  debootstrap rinse rootlesskit xfsprogs zfs-fuse | zfsutils-linux
  git-daemon-run | git-daemon-sysvinit git-doc git-email git-gui gitk gitweb
  git-cvs git-mediawiki git-svn needrestart-session | libnotify-bin
  iucode-tool ed diffutils-doc perl-doc libterm-readline-gnu-perl
  | libterm-readline-perl-perl make libtap-harness-archive-perl
以下のパッケージが新たにインストールされます:
  binutils binutils-aarch64-linux-gnu binutils-common cgroupfs-mount
  containerd criu docker-compose docker.io git git-man libbinutils
  libctf-nobfd0 libctf0 liberror-perl libgdbm-compat4 libgprofng0 libintl-perl
  libintl-xs-perl libjansson4 libmodule-find-perl libmodule-scandeps-perl
  libnet1 libnftables1 libnl-3-200 libperl5.36 libproc-processtable-perl
  libprotobuf32 libsort-naturally-perl libterm-readkey-perl needrestart patch
  perl perl-modules-5.36 python3-distutils python3-docker python3-dockerpty
  python3-docopt python3-dotenv python3-lib2to3 python3-protobuf
  python3-texttable python3-websocket runc tini
アップグレード: 0 個、新規インストール: 44 個、削除: 0 個、保留: 0 個。
72.1 MB のアーカイブを取得する必要があります。
この操作後に追加で 367 MB のディスク容量が消費されます。
続行しますか? [Y/n]

EC2イメージのdebianだと管理ユーザーがadminになっとりますんで、それをdockerグループに追加して一度ログインし直しとります。

admin@ip-172-31-45-14:~$ sudo adduser admin docker
Adding user `admin' to group `docker' ...
Done.
admin@ip-172-31-45-14:~$ exit
ログアウト
Connection to 13.112.86.35 closed.

admin@ip-172-31-45-14:~$ id
uid=1000(admin) gid=1000(admin) groups=1000(admin),4(adm),20(dialout),24(cdrom),25(floppy),27(sudo),29(audio),30(dip),44(video),46(plugdev),109(docker)

やっぱりlaravel.buildを使う

最悪curlとかは必要というわけで

$ type curl
curl は /usr/bin/curl です

まあmysqlだけあればええやろって事でね。devcontainerオプション付きでinstall

curl -s "https://laravel.build/devcontainer-test?with=mysql&devcontainer" | bash

この段階で大体バージョン管理するよねっていう話

$ cd devcontainer-test/
$ git init
$ git add .
$ git commit -m "initialized by laravel.build"

まずはコマンドで起動テスト

いつもの感じのdocker-compose.ymlが構成されるので起動してみたい、が、

services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql

個人的にはport8000でlaravelを起動し、5173でviteを待ち受けたいのでawsの場合ポートを開放しておかにゃならんという事。そのチェックも兼ねている。

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:BVM8eJ2mHMkT1+cNGzJvplyvjP6KFt0gbGPMSnSwLC4=
APP_DEBUG=true
APP_URL=http://localhost
APP_PORT=8000 # <- 追加

./vendor/bin/sail up

viteも適当に確認しときたい

とりあえずbreezeをbladeでinstall

$ ./vendor/bin/sail composer require laravel/breeze --dev
$ ./vendor/bin/sail artisan breeze:install blade

npm installは必要ないとは思う。多分実行されている。実際やっても何も起きない。

admin@ip-172-31-45-14:~/devcontainer-test$ ./vendor/bin/sail npm install

up to date, audited 112 packages in 932ms

21 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

viteを編集。EC2は何も考えてないと適当なIPが振られるから、これはかなり適当なセッティングだ。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';


export default defineConfig({
    server: {
        hmr: { host: '13.112.86.35' },
    },

    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
});

$ ./vendor/bin/sail npm run dev

以上が前段階である。ごちゃっとdiffが発生しているのでcommitしておいた

admin@ip-172-31-45-14:~/devcontainer-test$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   app/Providers/RouteServiceProvider.php
        modified:   composer.json
        modified:   composer.lock
        modified:   package.json
        modified:   resources/css/app.css
        modified:   resources/js/app.js
        modified:   resources/views/welcome.blade.php
        modified:   routes/web.php
        modified:   vite.config.js

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        app/Http/Controllers/Auth/
        app/Http/Controllers/ProfileController.php
        app/Http/Requests/
        app/View/
        package-lock.json
        postcss.config.js
        resources/views/auth/
        resources/views/components/
        resources/views/dashboard.blade.php
        resources/views/layouts/
        resources/views/profile/
        routes/auth.php
        tailwind.config.js
        tests/Feature/Auth/
        tests/Feature/ProfileTest.php

.devcontainer/devcontainer.jsonの設定

前回とあんま変えてないっす。まあextensionの設定だけやね実質

--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -6,9 +6,13 @@
        ],
        "service": "laravel.test",
        "workspaceFolder": "/var/www/html",
+       "settings": {
+               "php.format.codeStyle": "PSR-2"
+       },
        "customizations": {
                "vscode": {
                        "extensions": [
+                               "DEVSENSE.phptools-vscode"
                                // "mikestead.dotenv",
                                // "amiralizadeh9480.laravel-extra-intellisense",
                                // "ryannaddy.laravel-artisan",

繋ぐ

sshで繋ぐ拡張は必要であーる。

ssh-agentを使いたいならwindowsのサービスに登録してssh-add.exeとかからやっておかないとダメなんじゃあねえかな。windows環境のこの辺はあんま詳しくないっす。

でまあさっきの開く

とまあ、ほぼlocalで立ち上げたのと変わらない感覚でリモート開発すら可能という所が良い点である、が、xdebugに関してはリモートサーバーでやるのは辛いのでそれに関してはローカルで何とかした方がいいっすよ的な記事になりました

あらかた満足したのでEC2を終了する

この手の記事を書くにあたってEC2はさっと構成してさっと終われるので楽だ。IPアドレスも打ち捨てられるし…

本格的に運用する場合はEIPを取るなり何なり頑張ってみてください。

この記事が気に入ったらサポートをしてみませんか？