SEOに強いホームページやWEBアプリにするためにNuxt.jsのSSGタイプを選択することは多いです。
その場合のデプロイファイルは主に最終出力されたdistディレクトリ内となり複雑になってきます。
毎日のようにデプロイをするのなら自動化していきましょう❗
プロジェクト構造
├── 🔧 設定ファイル
│ ├── nuxt.config.js (メイン設定)
│ ├── package.json (依存関係)
│ └── .gitignore
│
├── 📁 config/ (環境別設定)
│ ├── env.development.js
│ ├── env.staging.js
│ └── env.production.js
│
├── 📁 pages/
│ ├── ***.vue
│ ├── その他のページファイル
│
├── 📁 assets/ (コンパイル前アセット)
│ ├── 📁 scss/
│ │ ├── bootstrap.scss (Bootstrap カスタマイズ)
│ │ └── style.scss (カスタムスタイル)
│
├── 📁 static/ (静的ファイル)
│ ├── robots.txt (クローラー設定)
│ ├── 📁 img/
│ │ ├── *.jpg
│ │ ├── *.webp
│ │ └── favicon.ico
│ └── 📁 js/
│ └── 📁 bootstrap/
│
├── 📁 .github/
│ ├── 📁 workflows/
│ │ └── deploy.yml (GitHubAction用のデプロイファイル)
│
├── 📁 dist/ (ビルド出力) [gitignore]
│ ├── index.html
│ └── その他の静的ファイル
GitHUB Action用のdeploy.yml
name: Deploy to Production
on:
workflow_dispatch: # 手動で実行するためのトリガー
jobs:
build-and-deploy:
runs-on: ubuntu-latest # ビルドするための仮想環境をUbuntuに設定する
steps:
- name: Checkout code # 仮想環境にリポジトリをクローンする
uses: actions/checkout@v4
- name: Setup Node.js # 仮想環境にNode.jsをインストールする
uses: actions/setup-node@v4
with:
node-version: '22' # Node.jsのバージョンを22に設定する
cache: 'npm' # npmのキャッシュを有効にする
- name: Install dependencies # 仮想環境で依存パッケージをインストールする
run: npm ci
- name: Build for production # 仮想環境でビルドを実行する
run: npm run generate:prod
- name: Setup SSH key # SSHキーを設定する
run: |
mkdir -p ~/.ssh
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan -H ${{ secrets.PRODUCTION_HOST }} >> ~/.ssh/known_hosts
- name: Deploy to production server # 本番サーバーにrsyncでデプロイする
run: |
rsync -avz --delete \
--exclude='.git' \
--exclude='.github' \
--exclude='node_modules' \
--exclude='*.log' \
--exclude='.nuxt' \
--exclude='.env' \
--exclude='package-lock.json' \
--exclude='nuxt.config.js' \
--exclude='assets' \
--exclude='pages' \
--exclude='config' \
--include='static/***' \
--include='dist/***' \
./dist/ ${{ secrets.PRODUCTION_USER }}@${{ secrets.PRODUCTION_HOST }}:${{ secrets.PRODUCTION_PATH }}
- name: Set file ownership to www-data # ファイルの所有権とグループが崩れるのでwww-dataに変更する
run: |
ssh ${{ secrets.PRODUCTION_USER }}@${{ secrets.PRODUCTION_HOST }} \
"sudo chown -R www-data:www-data ${{ secrets.PRODUCTION_PATH }}"
- name: Clean up # 仮想環境をクリーンアップする
if: always()
run: |
rm -f ~/.ssh/id_rsa