記事の概要
このシリーズは、私がポートフォリオを制作する過程を記事にしたものです。
また、GitHubにソースコードを公開しています。
第一回はこちら
今回の作業内容
- Docker-composeを利用して起動してみる
環境
サーバー: さくらのVPS(1GB, SSD: 50GB), Debian
Webサーバー: Apache
作業の流れ
- ローカルにあるプロジェクトをGithubで公開
- さくらのVPSサーバーから、リポジトリをcloneする
- Apacheにリバースプロキシを設定
- docker-compose で build して動作確認
詰まったことと解決策
サーバーにbuildをする際にメモリ不足で一度失敗してしまいました。私が契約しているサーバーはメモリが1GBしかないので当然と言えば当然ですが、、、
解決策として、スワップファイルを使うという方法を採用しました。以下のコマンドを入れるだけで対策できるので非常に楽でした。
sudo fallocate -l 1G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
1. ローカルにあるプロジェクトをGithubで公開
まずはGithubにリポジトリを作成して、公開していきます。
※普通の作業なので割愛します
2. さくらのVPSサーバーから、リポジトリをcloneする
Githubからリモートリポジトリをcloneする作業自体は通常通りなので割愛します。
この後で必ず以下の作業を行ってください。
-
portfolio-app配下に.envを追加する
.envファイルが存在しない場合はエラーが起きてしまいます。
3. フロントエンドのDockerfileでリバースプロキシを設定
APIをURLで公開できるように、リバースプロキシの設定を行っていきます。
リバースプロキシは、フロントエンドにアクセスできるように動かしているApacheに対して行っていきます。
以下の様にDockerfileに追記すると、コンテナを立ち上げるときにApacheの設定ファイルでリバースプロキシの設定をしてくれます。
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# Tailwindのコンパイルを含むビルドを実行
RUN npm run build
# CMD ["npm", "run", "start"]
FROM httpd:2.4-alpine
# ====================ここから追加=============================
RUN sed -i 's/#LoadModule proxy_module/LoadModule proxy_module/' /usr/local/apache2/conf/httpd.conf \
&& sed -i 's/#LoadModule proxy_http_module/LoadModule proxy_http_module/' /usr/local/apache2/conf/httpd.conf \
&& echo 'ProxyPass /api/ http://api:8080/' >> /usr/local/apache2/conf/httpd.conf \
&& echo 'ProxyPassReverse /api/ http://api:8080/' >> /usr/local/apache2/conf/httpd.conf \
&& echo 'ServerName localhost' >> /usr/local/apache2/conf/httpd.conf
# ====================ここまで追加=============================
COPY --from=builder /app/out /usr/local/apache2/htdocs/
EXPOSE 80
コードを追記すると、http://ドメイン/apiでアクセスできるようになります。
4. docker-compose で build して動作確認
以下のコマンドでビルドしていきます。
このコマンドの実行は、portfolio-appディレクトリ内で行います。
docker compose build --no-cache --progress=plain
docker compose up -d
コマンドを実行した後は、しばらく処理が流れていくので気長に待ちましょう。
成功したら、サーバーのURLに/や/apiとつけて正しく立っているか確認してみましょう！
http://サーバーのドメイン/
http://サーバーのドメイン/api/
次の記事