Zenn
🐳

React×Rails×DockerのWebアプリをXserver VPSにデプロイした

2023/12/30に公開
Docker
Rails
React
デプロイ
VPS
tech

イントロダクション

今回開発したアプリケーションは、AtCoderなどアルゴリズムの学習の際、学んだコードを見やすく保存しておくことができるものです。
VPSの練習もかねてデプロイしてみることにしました。
今回SSL化はしていません。
またローカルでNginx、React、Rails、Postgresがきちんと動いている前提です。

使用したものは以下の通りです。

  • フロントエンド：React
  • バックエンド：Rails
  • DB：Postgres
  • Webサーバー：Nginx
  • コンテナ：Docker
  • VPS：Xserver VPS(2GBメモリ仮想3コア/CentOS Stream 9)
  • ドメイン：Xserver Domain

デプロイ手順

Xserver VPSのセットアップ

1. SSH接続を行う。

ssh -l root -i id_rsa <標準ホスト名> -p 22

2. docker-compose, gitを入れる

以下の記事を参考に行いました。
https://zenn.dev/canesro/articles/32e1211c290590
コピペ用コマンド

sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine
sudo yum install -y yum-utils
sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
sudo yum install docker-ce docker-ce-cli containerd.io docker-compose-plugin
sudo systemctl start docker
sudo docker run hello-world
sudo groupadd docker
sudo usermod -aG docker $USER
newgrp docker
docker run hello-world
docker compose --version
sudo yum update
sudo yum install git
git --version

3. クローンする

git clone https://github.com/~~
cd <リポジトリ名>

4. docker compose build & up -dする

なぜかtmp/db内にファイルがあると動かなかったため、dbフォルダを消しました。

sudo rm -rf db/
docker compose build
docker compose up -d
docker ps

この時点でバックエンドとDBは動きました。

5. マイグレーションする

バックエンドのコンテナに入り、マイグレーションを行います。

docker exec -it <コンテナID> /bin/bash
rails db:create
rails db:migrate

ここまででバックエンド+DBのセットアップは完了です。

6. Reactを動かす

なぜかnpm installが実行されずコンテナが立ち上がらないため、手動で行います。
frontendのDockerfileの

CMD ["npm", "start"]

をコメントアウトし、コンテナを再起動します。

docker compose build
Docker compose up -d

フロントのコンテナに入り、コマンドを実行します。

docker exec -it <コンテナID> sh
npm install
nohup npm start &

これでフロントも動きました。

7. ドメイン設定する

ドメイン取得し、XserverのDNSレコード設定から
ホスト名 種別 内容 TTL 優先度
<ドメイン名> A <IPアドレス> 3600 -
www.<ドメイン名> A <IPアドレス> 3600 -
を追加します。
数時間経つと反映されるので待ってからhttp://<ドメイン名>:<ポート>/..にアクセスし、確認します。

8. CRUD処理を動かす

.envファイルなどでfetch先を書き換えます。
開発時はlocalhostになっていると思いますが、ドメイン名:ポートに書き換えました。
次にRailsのホスト設定を行うため、下記をconfig/environments/development.rbやproduction.rbに追記します。

config.hosts << "<ドメイン名>"

これでデプロイ完了です。

つまづきポイント

  • docker compose buildが終わらない
    初め、メモリを1GBにしていたときビルドできませんでしたが、メモリを2GBにしたところ正常にビルドできました。
    さくらVPSはお試し無料期間があるので、メモリがどのくらいあれば動くのか試してみると良いと思います。
  • HTTPS化できない
    まだつまづいています。nginxを使うと思うんですがよくわからなかったので勉強しようと思います。

まとめ

今回は月1000円ちょいでデプロイできました。
さくらにしなかったのはXserverの方が安かったからで、特に理由はありません。
SSL化できたらまた記事書こうと思います。

Discussion