Vue Academy · レッスン

フルスタックVueの本番デプロイ

Vue + Fastify向けDocker Compose、nginxリバースプロキシ、Let's EncryptによるSSL、CI/CD

レッスン 4/413 ステップ

「フルスタックVueの本番デプロイ」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

本番環境のトポロジー

本番環境のフルスタックVue + Fastifyアプリは、通常2つのコンテナで実行します。1つはビルド済みVueの静的ファイルを配信するnginxコンテナ、もう1つはFastify APIコンテナです。nginxは/apiをAPIにリバースプロキシもします。

Vueアプリをビルドする

ViteでSPAをビルドし、最適化された静的アセットをdistに生成します。これをnginxが配信します。

# package.json script
npm run build
# produces dist/ with hashed JS/CSS and index.html

VueのDockerfile(マルチステージ)

マルチステージDockerビルドを使用します。Nodeでビルドした後、静的な出力を小さなnginxイメージにコピーします。最終イメージに含まれるのは静的ファイルとnginxだけです。

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf: SPAとAPIプロキシ

nginxの設定でSPAを配信し(クライアント側ルーティングのためにindex.htmlへフォールバックするtry_filesを使用)、/apiをサービス名でFastifyコンテナにプロキシします。

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://fastify-api:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

FastifyのDockerfile

APIイメージに本番用の依存関係をインストールしてサーバーを実行します。他のコンテナから到達できるように、0.0.0.0にバインドします。

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

docker-compose.yml

docker-composeで共有ネットワーク上に2つのサービスを接続します。nginx.confのプロキシ先fastify-apiは、ここで指定するサービス名と一致します。

services:
  vue-nginx:
    build: ./frontend
    ports:
      - '80:80'
      - '443:443'
    depends_on:
      - fastify-api
  fastify-api:
    build: ./backend
    environment:
      - JWT_SECRET=${JWT_SECRET}
    expose:
      - '3000'

名前によるサービスディスカバリ

Composeネットワーク内では、コンテナ同士がサービス名で通信します。nginxはhttp://fastify-api:3000にプロキシするため、IPアドレスは不要で、APIポートを公開する必要もありません。

# only nginx is published to the host (80/443)
# fastify-api uses 'expose', reachable only internally

CertbotでSSLを設定する

Certbotを使用し、Let's Encrypt経由でHTTPSを追加します。証明書をnginxにマウントして443のserverブロックを設定し、HTTPをHTTPSにリダイレクトします。

server {
  listen 443 ssl;
  ssl_certificate /etc/letsencrypt/live/app.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/app.com/privkey.pem;
  # ... same location blocks as before
}
server {
  listen 80;
  return 301 https://$host$request_uri;
}

Certbotの更新

Certbotの証明書の有効期間は90日です。スケジュール(cronまたはサイドカーコンテナ)で更新コマンドを実行し、nginxをリロードして更新された証明書を反映します。

# cron entry, twice daily
certbot renew --quiet && nginx -s reload

GitHub ActionsによるCI/CD

GitHub Actionsでビルドとデプロイを自動化します。mainへのプッシュを契機にビルドとテストを行い、その後イメージをビルドしてプッシュするか、SSHでサーバーに接続してイメージをpullし、Composeで再起動します。

name: deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm test
      - name: Deploy over SSH
        run: ssh $HOST 'cd /app && git pull && docker compose up -d --build'

シークレットと環境変数

シークレットをイメージに決して埋め込まないでください。GitHub Actionsのシークレットをもとに、環境変数(Composeのenvironment / env_file)経由で渡します。JWT_SECRETやDBのURLなどをリポジトリに置かないでください。

確認テスト

フルスタックのデプロイについての理解度を確認しましょう。

まとめ

本番環境へのデプロイについて学びました。

  • サービスはvue-nginx(静的ファイル)とfastify-apiの2つです
  • nginx.confがSPAを配信し、/apiをAPIサービス名にプロキシします
  • docker-composeで両者を接続し、ホストに公開するのはnginxだけです
  • CertbotでHTTPSを設定し、スケジュールに従って更新します
  • GitHub Actionsでビルド、テスト、デプロイを行い、シークレットは環境変数に保持します
無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
42
レッスン
156

よくある質問

「フルスタックVueの本番デプロイ」レッスンは無料ですか?

はい。「フルスタックVueの本番デプロイ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「フルスタックVueの本番デプロイ」で何を学びますか?

Vue + Fastify向けDocker Compose、nginxリバースプロキシ、Let's EncryptによるSSL、CI/CD ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「フルスタックVueの本番デプロイ」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか?

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Vue SPA向けFastifyバックエンド
  2. JWT認証:ログインとリフレッシュ
  3. Axiosインターセプターによる認証API呼び出し
  4. フルスタックVueの本番デプロイ
← Vue Academyに戻る