Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ruu2023

LaravelもViteもVueもわかんないから、デプロイまで簡単にまとめる

Last updated at Posted at 2024-12-03

この記事で書くこと

Laravel11 + Vite (Vue.js) のインストール

フォルダの作成

myapp(プロジェクトフォルダ)
├── docker
│   ├── app
│   │   ├── Dockerfile
│   │   └── php.ini
│   ├── db
│   │
│   └── nginx
│       ├── Dockerfile
│       ├── default.conf
│       └── logs
├── docker-compose.yaml
└── my.cnf
  • こうなります 👇️

Docker, docker-compose, 各 conf

docker-compose の編集

docker-compose.yaml
services:
  nginx:
    container_name: "nginx"
    build:
      context: ./docker/nginx
    depends_on:
      - app
    ports:
      - 80:80
    volumes:
      - ./:/src

  app:
    container_name: "app"
    build:
      context: ./docker/app
    depends_on:
      - db
    ports:
      - 5173:5173
    volumes:
      - ./:/src
      - /src/node_modules
      - /src/vendor
      - ./docker/app/php.ini:/usr/local/etc/php/php.ini

  db:
    image: mysql:8.0.37
    container_name: "db"
    volumes:
      - ./docker/db:/var/lib/mysql
      - ./my.cnf:/etc/mysql/conf.d/my.cnf
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=myapp
    ports:
      - 3306:3306

  redis:
    image: redis:alpine
    container_name: "redis"
    ports:
      - 16379:6379

  • 高速化のため以下のフォルダはマウントから除外（これをしないと vite のロードに 1 分かかる）

    • /src/node_modules
    • /src/vendor

  • そのため docker-compose down のたびに下記コマンド必須。

    • composer install
    • npm install

my.cnf の編集

./my.cnf
[mysqld]
max_allowed_packet = 32505856
lower_case_table_names = 2
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

[client]
default-character-set=utf8mb4

nginx の Dockerfile

docker/nginx/Dockerfile
FROM nginx:1.27
COPY ./default.conf /etc/nginx/conf.d/default.conf

nginx の default.conf

docker/nginx/default.conf
server {

    listen 80;
    server_name _;

    client_max_body_size 1G;

    root /src/public;
    index index.php;

    access_log /src/docker/nginx/logs/access.log;
    error_log  /src/docker/nginx/logs/error.log;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }

}

app の dockerfile

docker/app/Dockerfile
FROM php:8.3-fpm
EXPOSE 5173
RUN apt-get update \
  && apt-get install -y \
  git \
  zip \
  unzip \
  vim \
  libfreetype6-dev \
  libjpeg62-turbo-dev \
  libmcrypt-dev \
  libpng-dev \
  libfontconfig1 \
  libxrender1

RUN docker-php-ext-configure gd --with-freetype --with-jpeg
RUN docker-php-ext-install gd
RUN docker-php-ext-install bcmath
RUN docker-php-ext-install pdo_mysql mysqli exif
RUN cd /usr/bin && curl -s http://getcomposer.org/installer | php && ln -s /usr/bin/composer.phar /usr/bin/composer

ENV NODE_VERSION=20.15.0
RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
ENV NVM_DIR=/root/.nvm
RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
ENV PATH="/root/.nvm/versions/node/v${NODE_VERSION}/bin/:${PATH}"
RUN node --version
RUN npm --version

WORKDIR /src
ADD . /src/storage
RUN chown -R www-data:www-data /src/storage

app の php.ini の編集

docker/app/php.ini
upload_max_filesize=256M
post_max_size=256M

Laravel, 初回 migrate

app の起動

> docker compose up -d
  • file not found が正しいです 👇️

一時フォルダを作成して Laravel をインストール

> docker compose exec app bash

src# mkdir temp
src# cd temp
src/temp# composer create-project "laravel/laravel=11.*" . --prefer-dist
  • 画面上はこうなってます 👇️

中身をプロジェクトフォルダに移動して、一時フォルダを削除する

src/temp# cd ..
src# mv l11dev_tmp/* ./
src# mv l11dev_tmp/.* ./
src# rm l11dev_tmp -rf

依存関係のインストール

src# composer install
src# npm install
  • フォルダ構成 👇️

The stream or file "/src/storage/logs/laravel.log" could not be opened in append mode の防止

  • root 以外に www-data が書き込みできるように変更
  • Laravel の公式に指定された、strage のシンボリックリンクを設置
src# chmod -R guo+w storage
src# php artisan storage:link

DB との接続

  • env ファイルでコメントアウトされている箇所を変更
.env
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=myapp
DB_USERNAME=root
DB_PASSWORD=root
  • .env 上記の変更箇所 👇️
  • migration
src:# php artisan migrate

アクセステスト

  • 共通 #src npm run dev をしてからアクセステスト。
  • 共通 Ctrl + C で抜けてから構築作業

Vite

welcome.blade.php の確認

  • welcome.blade.php に以下の記述があるか確認 -> ない場合は/head の前に記述する
resources/views/welcome.blade.php
@vite(['resources/css/app.css', 'resources/js/app.js'])
  • この記述を確認する 👇️

vite.config.js の変更

  • 以下の画像の位置にコードを追加する
vite.config.js
    server: {
        host: true,
        hmr: {
            host: 'localhost',
        },
    },
  • 上記の位置 👇️

Vite の起動

/src# npm run dev

設定を変えて再起動するとき

> docker compose down
> docker compose up -d --build
> docker compose exec app bash
src:# composer install
src:# npm install

vue のインストール

src:# npm install vue @vitejs/plugin-vue

app.js の編集

resources/js/app.js
import "./bootstrap";
import { createApp } from "vue";
import ExampleComponent from './components/ExampleComponent.vue';

const app = createApp({});
app.component('example-component', ExampleComponent);
app.mount('#app');

resources/js/components/ExampleComponent.vue 　の作成

resources/js/components/ExampleComponent.vue
<template>
    <div>
        <h1>Hello, Vue with Vite!</h1>
    </div>
</template>

<script>
export default {
    name: 'ExampleComponent',
};
</script>

<style scoped>
h1 {
    color: blue;
}
</style>

welcome.blade.php の編集

  • body の中をすべて削除して記入
resources/views/welcome.blade.php
<body>
    <div id="app">
        <example-component></example-component>
    </div>
</body>

Vue の動作確認

  • vite.config.js の編集
vite.config.js
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
        vue(),
    ],
    resolve: {
        alias: {
            vue: "vue/dist/vue.esm-bundler.js",
        },
    },
    server: {
        host: true,
        hmr: {
            host: "localhost",
        },
    },
});

http://localhost の確認

Laravel の MVC

Controller, View, web.php(routing)

controller の作成

/src# php artisan make:controller SampleController
  • controller の編集
app/Http/Controllers/SampleController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SampleController extends Controller
{
    public function index()
    {
        return view('sample'); // resources/views/sample.blade.php
    }
}

view の作成

src# touch resources/views/sample.blade.php
  • view の編集
resources/views/sample.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
</head>
<body>
    <h1>Hello from Sample View!</h1>
</body>
</html>

web.php の編集

routes/web.php
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SampleController;

Route::get('/', function () {
    return view('welcome');
});

Route::resource('samples', SampleController::class);
  • これで自動的にルートが生成される 👇️

http://localhost/samples にアクセス

migration, seeder

migration ファイルの作成

  • create_複数形_table
src# php artisan make:migration create_items_table
  • migration ファイルの編集(title は 100 文字制限)
database/migrations/2024_11_30_123816_create_items_table.php
...
public function up(): void
{
    Schema::create('items', function (Blueprint $table) {
        $table->id();
        $table->string('title', 100);
        $table->text('content');
        $table->timestamps();
    });
}
...

migration

src# php artisan migrate

Seeder ファイルの作成

src# php artisan make:seeder ItemsTableSeeder
  • Seeder ファイルの編集
database/seeders/ItemsTableSeeder.php
...
use Illuminate\Support\Facades\DB;

class itemsTableSeeder extends Seeder
{
  public function run(): void
  {
      DB::table('items')->insert([
          'title' => 'タイトル１',
          'content' => 'テストデータ１',
      ],
      [
          'title' => 'タイトル２',
          'content' => 'テストデータ２',
      ]);
  }
...
}
  • DatabaseSeeder への登録
database/seeders/DatabaseSeeder.php
...
public function run(): void
{
    $this->call(ItemsTableSeeder::class);
    ...
}
...

seeder の実行

src# php artisan db:seed

Model

model の作成

src# php artisan make:model Item

app/Models/item.php 　が生成される

db からデータの取り出し

app/Http/Controllers/SampleController.php
...
use App\Models\Item;

class SampleController extends Controller
{
  public function index(Request $request)
  {
    ...
    $title = Item::find(1)->title;
    return view("sample", ["title" => $title]);
    ...
  }
...
}

sample.blade.php の編集

resources/views/sample.blade.php
...
<body>
    <h1>Hello from Sample View!</h1>
    <?= $title ?>
</body>
...

http://localhost/samples 　にアクセス

AWS のデプロイ

EC2 起動, security-group

EC2 を開く

スクリーンショット 2024-12-02 12.09.27.jpg

スクリーンショット 2024-12-02 12.09.36.jpg

途中キーペアを作成した場合はダウンロードしておく（既存のでも OK）

スクリーンショット 2024-12-02 12.09.52.jpg

起動したインスタンスのパブリック IPv4DNS を確認

スクリーンショット 2024-12-02 12.13.16.jpg

ssh 接続

  • キーペアファイルはよく使うのでなくさないように保存
  • 保存したフォルダに cd していれば、フルパスじゃなくて、キーペアファイル名のみで OK
> ssh ec2-user@<パブリック IPv4DNSアドレス> -i <キーペアファイルまでのフルパス>

docker のインストール

sudo su
sudo dnf update
sudo dnf install -y docker
sudo systemctl start docker
sudo gpasswd -a $(whoami) docker
sudo chgrp docker /var/run/docker.sock
sudo service docker restart
sudo systemctl enable docker

sudo mkdir -p /usr/local/lib/docker/cli-plugins
sudo curl -SL https://github.com/docker/compose/releases/download/v2.21.0/docker-compose-linux-x86_64 -o /usr/local/lib/docker/cli-plugins/docker-compose
sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose

mkdir -p /work/docker
sudo chown -R ec2-user /work/docker
sudo chmod -R 775 /work/docker

sftp

プロジェクトのアップロード

  • プロジェクトを zip 化して、c/projects/docker に置く
sftp -oPort="22" -oIdentityfile="<キーペアのフルパス>" ec2-user@<パブリックIPv4DNS>
sftp> cd /work/docker
sftp> lcd ~/projects/docker
sftp> put myapp.zip

install

ssh ec2-user@<インスタンスのパブリックDNS> -i <キーペアファイル>
cd /work/docker
sudo su
unzip myapp.zip
rm -rf __MACOSX
rm -rf <zip ファイル>
cd myapp
docker compose up -d

docker compose exec app bash
src# composer install
src# npm install
src# npm run build

public アドレスにアクセスして表示確認

スクリーンショット 2024-12-03 21.37.14.jpg

参考にした記事

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?