Zenn
Open36

NUXT3+Laravel+EC2+VScodeの環境構築を考える

こんちゃんこんちゃん

まずEC2のインスタンスを起動する(Ubuntuを選択)

キーペアはssh接続に使うので作成すること

暗号鍵はあとで使うのでわかる場所に保存
C:\Users\ユーザー名

こんちゃんこんちゃん

EC2にDockerをインストール

パッケージを最新状態にする

sudo apt update

スクリプトをダウンロード

curl -fsSL https://get.docker.com -o get-docker.sh

次に、スクリプトをroot権限で実行。

sudo sh get-docker.sh

Ubuntu上でのDocker Engineの動作を確認する

sudo docker run hello-world

こんな感じのメッセージが出ればOK

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/

インストールが無事終わったらスクリプトファイルを削除

sudo rm get-docker.sh

参考記事

https://kinsta.com/jp/blog/install-docker-ubuntu/

こんちゃんこんちゃん

Laravel10 + Nuxt3 コンテナ環境構築

コンテナ構成：Nuxt.js + laravel + nginx + mysql

ファイル構成(今回作成するもの)

$ tree -L 2 ./laravel-nuxt/
./laravel-nuxt/
├── backend
│   ├── Dockerfile
│   ├── docker-entrypoint.sh
│   └── php.ini
├── docker-compose.yml
├── frontend
│   └── Dockerfile
└── nginx
    ├── Dockerfile
    └── conf

frontendディレクトリ配下がNuxt.js、backendディレクトリ配下がLaravel

nuxtコンテナ設定

作業ディレクトリの作成

sudo mkdir laravel-nuxt ; cd laravel-nuxt

node.js と npmの最新版をインストール

sudo apt install -y nodejs npm
sudo npm install n -g
sudo n stable
sudo apt purge -y nodejs npm
sudo apt autoremove -y

インストールが終わったらバージョンを確認

node -v #v20.12.2
npm -v #10.5.0

https://qiita.com/nouernet/items/d6ad4d5f4f08857644de

Nuxt3 app 作成

sudo npx nuxi init frontend --force

対話形式は下記の感じで選択

Ok to proceed? (y) #　y
✔ Which package manager would you like to use?
#　npm
✔ Are you interested in participating?
#　No
✔ Initialize git repository?
#　No

ファイルの書き込み権限を設定しておく

sudo chmod -R 777 .

Dockerファイル作成

frontend/Dockerfile
FROM node:18.18.0

WORKDIR /usr/src/app

COPY package*.json ./
RUN npm install

ENV LANG=C.UTF-8
ENV TZ =Asia/Tokyo

php & composer インストール

php インストール

sudo apt update
sudo apt install php
# バージョン確認
php -v

php拡張機能インストール

sudo apt-get install zip
sudo apt-get install php-cli php-common php-mysql php-zip php-gd php-mbstring php-curl php-xml php-bcmath
# モジュール確認
php -m

composer インストール

cd ../ 
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
sudo chmod +x /usr/local/bin/composer
cd laravel-nuxt
# バージョン確認
composer -v

laravelコンテナ作成

プロジェクト作成

sudo composer create-project laravel/laravel backend

Dockerfile作成

backend/Dockerfile
FROM php:8.1-fpm

COPY --from=composer:2.3.5 /usr/bin/composer /usr/bin/composer
COPY php.ini /etc/php/8.1/cli/conf.d/99-etc.ini

ADD docker-entrypoint.sh ./
RUN chmod +x ./docker-entrypoint.sh
CMD ["./docker-entrypoint.sh"]

RUN docker-php-ext-install pdo_mysql

WORKDIR /var/www/laravel

php.ini作成

backend/php.ini
[PHP]
post_max_size = 100M
upload_max_filesize = 100M
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

extension=redis.so

docker-entrypoint.sh作成

backend/docker-entrypoint.sh
composer install

if [ ! -e ./.env ]; then
  cp .env.example .env
fi

php artisan serve --host=0.0.0.0

env作成

backend/.env
---
-DB_CONNECTION=mysql
-DB_HOST=127.0.0.1
-DB_PORT=3306
-DB_DATABASE=laravel
-DB_USERNAME=root
-DB_PASSWORD=

+DB_CONNECTION=mysql
+DB_HOST=mysql
+DB_PORT=3306
+DB_DATABASE=database
+DB_USERNAME=user
+DB_PASSWORD=password

Mysqlコンテナ作成

env作成(環境ごとに適当な値を入れてください)

.env
DB_DATABASE=database
DB_USERNAME=user
DB_PASSWORD=password
DB_ROOT_PASSWORD=root

Nginxコンテナ作成

ディレクトリ作成

sudo mkdir -p nginx/conf

Dockerfile作成

nginx/Dockerfile
FROM nginx:1.19
RUN apt-get update && \
    apt-get install -y apt-utils \
    locales && \
    sed -i -e 's/# ja_JP.UTF-8/ja_JP.UTF-8/g' /etc/locale.gen && \
    locale-gen ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LC_TIME C
ENV TZ Asia/Tokyo
RUN echo "${TZ}" > /etc/timezone \
    && dpkg-reconfigure -f noninteractive tzdata
COPY conf/default.conf /etc/nginx/conf.d/default.conf

default.conf作成

nginx/conf/default.conf
server {
  listen 70;
  root /app/public;

  location / {
    proxy_pass    http://frontend:3000;
  }
  location /api {
    proxy_pass http://backend:8000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    add_header X-Server-Hostname $hostname;
    add_header X-Server-Address $server_addr;
  }

  client_max_body_size 100m;
  keepalive_timeout 5;
}

docker-compose.ymlを作成

docker-compose.yml
version: "3.7"
services:
  frontend:
    build: ./frontend
    environment:
      - NODE_ENV=development
      - HOST=0.0.0.0
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - ./frontend:/usr/src/app
    command: sh -c 'npm install && npm run dev'
    ports:
      - '3000:3000'
    tty: true
  backend:
    build: ./backend
    tty: true
    volumes:
        - ./backend:/var/www/laravel
    ports:
      - '8000:8000'
    env_file:
      - ./backend/.env
  mysql:
    image: mysql/mysql-server:5.7
    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    ports:
      - '3306:3306'
    environment:
      TZ: Asia/Tokyo
      MYSQL_ROOT_PASSWORD: '${DB_ROOT_PASSWORD}'
      MYSQL_DATABASE: '${DB_DATABASE}'
      MYSQL_USER: '${DB_USERNAME}'
      MYSQL_PASSWORD: '${DB_PASSWORD}'
    volumes:
      - /var/lib/mysql
    env_file:
      - ./.env
  nginx:
    build:
      context: ./nginx/
      dockerfile: Dockerfile
    ports:
      - 70:70
    tty: true
    restart: always
    depends_on:
      - frontend
      - backend
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro

コンテナ立ち上げ

sudo chmod -R 777 .
sudo docker compose build
sudo docker compose up

確認

  • Nginx + Nuxtコンテナ確認
    • パブリックIP:3000に接続してNuxtページが表示されていればOK
  • Laravelコンテナ確認
    • パブリックIP:8000に接続してLaravelページが表示されていればOK
      -Laravel + Mysqlコンテナ確認
      -migrationが通ることを確認
sudo docker compose exec backend php artisan migrate

参考記事

https://zenn.dev/suraud/articles/create-laravel-vue-docker

こんちゃんこんちゃん

フロントエンドで使うライブラリをインストール

sudo docker compose exec frontend bash
npm install -D @invictus.codes/nuxt-vuetify
npm i -D sass
npm install -D eslint @nuxtjs/eslint-module
npm install -D nuxt-unity-webgl
npm install csvtojson
npm install --save encoding-japanese
npm install -D alasql

https://zenn.dev/knm/articles/f1d642d954f41b

こんちゃんこんちゃん
{
    "root": true,       // プロジェクトの直下のeslintのファイルの場合に記載
    "env": {            // 環境変数の設定
      "browser": true,  // ブラウザ上で開発を行う場合に記載
      "node": true,   // nodeを使用する場合に記載
      "es2021": true,   // ここを記載する場合、以下の"ecmaVersion"は記載する必要はない
    },
    "parser":"@typescript-eslint/parser",      // ESLintに構文を理解させるために記載
    "parserOptions": {
      "ecmaVersion": "latest", // ECMAScriptのバージョンを記載
      "sourceType": "module",// import/exportを使用する場合に記載(デフォルトではscript)
      "ecmaFeatures": {
        "jsx": true,         // jsx記法を使用する場合に記載
      },
    },
    "extends": [],  // 外部のルールセットを使用する場合に記載
    "plugins": [],  // pluginを使用する場合に記載
    "rules": {      // 個別にルールを定義する場合にこの中に記載
      "quotes": ["error", "single"]  // 「シングルクォートに統一する、違うものを使用したらエラーを出力する」という設定
    },
  }
こんちゃんこんちゃん
sudo docker compose exec mysql mysql -uroot -p
use laravel;
INSERT INTO products (category,subcategory,subsubcategory,option1,option2) VALUES ('SmartPhone','iPhone','iPhone 15 Pro Max','Front','Perfect Shield');
INSERT INTO products (category,subcategory,subsubcategory,option1,option2) VALUES ('Tablet','iPad','iPad5','Front','Perfect Shield');
INSERT INTO products (category,subcategory,subsubcategory,option1,option2) VALUES ('SmartPhone','Galaxy','Galaxy S24','Front','Perfect Shield');
INSERT INTO products (category,subcategory,subsubcategory,option1,option2) VALUES ('SmartPhone','Xperia','Xperia 5','Front','Perfect Shield');

$ mysql -uroot -p
//MySQLにログインする

$ show databases;
$ use DB名;
$ show tables;
こんちゃんこんちゃん

Dockerの再ビルド時にdocker compose up -d でビルドしてしまったことが原因でした。
以下のコマンドで

sudo docker compose down --volumes --rmi all
sudo docker compose up -d --build

設定ファイルがない状態でMySQLの初期化が行われたでデータが永続化されてしまってるので一度ボリューム毎削除してビルドし直せばokです。

こんちゃんこんちゃん

現在のディレクトリ内のIdentifier拡張子ファイルをすべて削除するコマンド

find -name "*.Identifier" -exec rm {} \;
こんちゃんこんちゃん

フロントエンドの.env設定

frontend/.env
NUXT_PUBLIC_API_URL=http://xx.xxx.xx.xxx:8000