はじめに
この記事では、開発環境で動いていた Laravel + React (Inertia.js) アプリを、EC2 上で Docker を使って本番運用できる構成にする手順を解説します。
対象読者は以下のような方です：
- 開発環境では Laravel Sail を使っている
- EC2 に本番環境を構築したい
- RDS + Nginx + Docker の構成で運用したい
- HTTPS（Let’s Encrypt）も有効化したい
1. EC2に接続する
EC2インスタンス作成後、EC2 インスタンスに SSH 接続します。
mkdir -p ~/.ssh
mv ~/Downloads/*****.pem ~/.ssh/
chmod 400 ~/.ssh/*****.pem
ssh -i ~/.ssh/Tripost.pem ec2-user@ec*******.ap-northeast-1.compute.amazonaws.com
2. Docker のインストールと設定（Amazon Linux 2023）
EC2 上で Docker を使って開発環境に近い構成をそのまま再現。
開発環境と差が少ないので「動いたのに本番で動かない」問題が減る。
Amazon Linux 2023 は dnf を使用します。
sudo dnf update -y
sudo dnf install -y docker
sudo systemctl enable --now docker
docker --version
非 root ユーザーで Docker を使えるようにする
sudo usermod -aG docker ec2-user
newgrp docker
これで sudo なしで docker ps が動きます。
3. Docker Compose をインストール
Amazon Linux 2023 ではパッケージが無いため、バイナリから直接入れます。
sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version
4. GitHub からプロジェクトをクローン
sudo dnf install -y git
cd /home/ec2-user
git clone https://github.com/your-username/your-repo.git <プロジェクト名>
cd <プロジェクト名>
sudo chown -R ec2-user:ec2-user .
5. RDS の設定と接続確認
RDS 未作成の場合は先に作成しておきましょう。
EC2 から接続テスト：
sudo dnf install -y mariadb105
mysql -h (RDSのエンドポイント) -u admin -p
👉 パスワード入力 → mysql> プロンプトが出たら成功。
接続後、DB作成：
CREATE DATABASE (DB名) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
もし RDS で作成済みの DB 名が既にあるなら、新規作成は不要です。
名前を変える場合は .env.production と RDS の DB 名を必ず一致させること。
文字セットは utf8mb4 + utf8mb4_unicode_ci にしておくと絵文字や特殊文字も対応できます。
6. 環境変数ファイル .env.production の作成
nano .env.production
.env.production
APP_NAME=Tripost
APP_ENV=production
APP_KEY=base64:*****
APP_DEBUG=false
APP_URL=http://*****
APP_LOCALE=ja
APP_FALLBACK_LOCALE=ja
APP_FAKER_LOCALE=ja_JP
CACHE_DRIVER=redis
SESSION_DRIVER=redis
QUEUE_CONNECTION=redis
REDIS_CLIENT=phpredis
REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379
DB_CONNECTION=mysql
DB_HOST=*****.rds.amazonaws.com
DB_PORT=3306
DB_DATABASE=*****-db
DB_USERNAME=admin
DB_PASSWORD=*****
# その他 APIキー / S3設定など
VITE_GOOGLE_MAPS_KEY=*****
.env.production は Git にコミットしないよう .gitignore に追記
echo ".env.production" >> .gitignore
chmod 600 .env.production
.env や設定ファイル: アプリ／デプロイプロセスがファイルを書き換える必要があるなら 600、読み取りだけなら 400 でも可。多くは 600 を使うのが無難。
7. Dockerfile と docker-compose.production.yml の準備
開発環境でLaravel Sailを使用している場合、本番環境では使用不可なのでNginx+PHP-FPMを構築する。
Dokerfile
Dokerfile
FROM php:8.3-fpm
# 必要パッケージ & PHP拡張
RUN apt-get update && apt-get install -y \
git unzip curl libzip-dev libonig-dev libxml2-dev mariadb-client nodejs npm \
procps iproute2 net-tools \
&& docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath zip
# phpredis 拡張を追加
RUN pecl install redis \
&& docker-php-ext-enable redis
# Composer
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer
# FPM listen を全インターフェースに変更
RUN sed -i 's/listen = .*/listen = 0.0.0.0:9000/' /usr/local/etc/php-fpm.d/www.conf
WORKDIR /var/www/html
# php-fpm をフォアグラウンドで起動
CMD ["php-fpm"]
docker-compose.production.yml
docker-compose.production.yml
services:
laravel:
build:
context: .
dockerfile: Dockerfile
container_name: *****-laravel
env_file:
- .env.production
volumes:
- .:/var/www/html
ports:
- "9000:9000"
depends_on:
- redis
networks:
- *****
nginx:
image: nginx:1.25
container_name: *****-nginx
ports:
- "80:80"
volumes:
- .:/var/www/html
- ./nginx/conf.d:/etc/nginx/conf.d
depends_on:
- laravel
networks:
- *****
redis:
image: redis:7
container_name: *****-redis
ports:
- "6379:6379"
networks:
- *****
networks:
*****:
driver: bridge
8. コンテナビルド & 起動
コンテナビルド & 起動
docker compose -f docker-compose.production.yml --env-file .env.production up -d --build
docker compose ps // laravel コンテナが Up になっているか確認
本番用APP_KEY作成:
docker compose -f docker-compose.production.yml exec laravel php artisan key:generate --show
docker compose -f docker-compose.production.yml exec laravel php artisan config:cache
9. マイグレーション & シード
docker compose -f docker-compose.production.yml exec laravel php artisan migrate --force
docker compose -f docker-compose.production.yml exec laravel php artisan db:seed --force
10. Nginx 設定（EC2 フロント用）
sudo amazon-linux-extras install nginx1 -y
sudo systemctl enable nginx
sudo systemctl start nginx
//ディレクトリ作成（存在しない場合）
sudo mkdir -p /etc/nginx/conf.d
//EC2 上の Nginx を Laravel コンテナのフロントとして動かす設定
sudo nano /etc/nginx/conf.d/*****.conf
//設定テスト
sudo nginx -t
sudo systemctl restart nginx
11. React / Inertia.js のビルド設定
Inertia.js（React）で構築したフロントエンドを本番環境用にビルドします。
Vite を使用している場合、Laravel 側で JS / CSS を正しく読み込むための設定が必要です。
- ビルドコマンドの実行
docker compose -f docker-compose.production.yml exec laravel npm install
docker compose -f docker-compose.production.yml exec laravel npm run build
もしエラーで「manifest.jsonが見つからない」と出た場合：
docker exec -it tripost-laravel bash
cp public/build/.vite/manifest.json public/build/manifest.json
chown -R www-data:www-data public/build
chmod -R 755 public/build
php artisan config:clear && php artisan cache:clear
exit
- Laravel 側の設定確認
resources/views/app.blade.php や vite.config.js、config/vite.php の設定を正しく行っていない場合も
manifest 読み込みエラーが発生します。以下の設定を確認しましょう。
resources/views/app.blade.php
Laravel × Inertia.js のエントリーポイント。
Vite のビルド済み JS / CSS を読み込むよう指定します。
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 inertia>{{ config('app.name', 'Laravel') }}</title>
@routes
@viteReactRefresh
@vite([
'resources/js/app.jsx',
isset($page['component']) ? "resources/js/Pages/{$page['component']}.jsx" : null
])
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>
vite.config.js
開発環境（npm run dev）と本番環境（npm run build）を切り替える設定です。
ビルド後のファイルは /public/build に出力されます。
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
const isProduction = process.env.NODE_ENV === 'production';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.jsx',
refresh: !isProduction,
}),
react(),
],
base: isProduction ? '/build/' : '/',
build: {
outDir: 'public/build',
emptyOutDir: true,
manifest: true,
rollupOptions: {
input: 'resources/js/app.jsx',
},
assetsDir: 'assets',
},
});
config/vite.php
Laravel 側で Vite の manifest ファイルを参照できるようにします。
.vite/manifest.json ではなく build/manifest.json に変更しておくことが重要です。
config/vite.php
<?php
return [
/*
|--------------------------------------------------------------------------
| Vite manifest path
|--------------------------------------------------------------------------
|
| Vite のビルド後 manifest.json のパス
|
*/
'manifest_path' => public_path('build/manifest.json'),
];
キャッシュクリア
docker compose -f docker-compose.production.yml exec laravel php artisan config:clear
docker compose -f docker-compose.production.yml exec laravel php artisan view:clear
12. HTTPS（Let’s Encrypt + Certbot）
//Certbotのインストール
sudo dnf install -y certbot python3-certbot-nginx
// Nginxコンテナを一時停止
docker stop tripost-nginx
// 証明書取得（your-domain.comを実際のドメインに置き換え）
sudo certbot certonly --standalone -d your-domain.com
// Nginxコンテナを再起動
docker start tripost-nginx
Nginx設定の更新。*****.conf に HTTPS 設定を追加：
# HTTP → HTTPS リダイレクト
server {
listen 80;
server_name your-domain.com www.your-domain.com;
return 301 https://$host$request_uri;
}
# HTTPS設定
server {
listen 443 ssl http2;
server_name your-domain.com www.your-domain.com;
# SSL証明書の設定
ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
# SSL設定の最適化
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384;
ssl_prefer_server_ciphers off;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;
# HSTS設定（セキュリティ強化）
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
root /var/www/html/public;
index index.php index.html;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
include fastcgi_params;
fastcgi_pass laravel:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
# HTTPS用パラメータ追加
fastcgi_param HTTPS on;
fastcgi_param SERVER_PORT 443;
}
location ~ /\.ht {
deny all;
}
# Let's Encrypt用のアクセス許可
location ~ /.well-known/acme-challenge {
allow all;
root /var/www/html/public;
}
docker-compose.production.yml に HTTPS ポートを追加：
docker-compose.production.yml
ports:
- "80:80"
- "443:443"
volumes:
- /etc/letsencrypt:/etc/letsencrypt:ro
また、.env.productionファイルの該当部分をhttpsへ変更しておく。
13. 証明書の自動更新（cron）
echo "0 0 * * 0 root certbot renew --quiet && docker restart tripost-nginx" | sudo tee -a /etc/crontab
14. 動作確認
http://<EC2のパブリックIP>
https://your-domain.com
まとめ
| 項目 | 内容 |
|---|---|
| OS | Amazon Linux 2023 |
| Web サーバ | Nginx (Docker) |
| アプリ | Laravel + React (Inertia.js) |
| DB | Amazon RDS (MySQL) |
| キャッシュ | Redis |
| HTTPS | Let’s Encrypt (Certbot) |
| デプロイ方式 | Docker Compose + 手動更新 or CI/CD |
この構成により、開発環境（Sail）とほぼ同等の構成を EC2 上で再現でき、
「開発では動いたのに本番で動かない」問題を大幅に減らすことができます。