フルスタックVueの本番デプロイ
Vue + Fastify向けDocker Compose、nginxリバースプロキシ、Let's EncryptによるSSL、CI/CD
「フルスタック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.htmlVueの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.confnginx.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 internallyCertbotで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 reloadGitHub 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フィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Vue SPA向けFastifyバックエンド
- JWT認証:ログインとリフレッシュ
- Axiosインターセプターによる認証API呼び出し
- フルスタックVueの本番デプロイ