🐰

frourioをGCEにデプロイする

2021/01/14に公開

Google Cloud

frourio

tech

GCP初心者が最近流行りのfrourioをGCE(Google Compute Engine)にデプロイした手順を書きます。

frourioの設定

フロント：Nuxt.js(3000番で起動)
バックエンド：Fastify(8080番で起動)
DB：PostgreSQL(Docker上で5432番で起動。ルート直下にdocker-compose.ymlファイルを置いています）

1.vmインスタンスを立てる

下記キャプチャのように設定（リージョンやマシンタイプなどは必要に応じて変更してください）

2. vmインスタンスにSSH接続

ターミナルからgcloudコマンドを使ってvmインスタンスにSSH接続します。（Goole Cloud SDKがない場合はインストールしてください。）
今回は「instance-2」という名前でインスタンスを作ったので下記コマンドを実行

gcloud compute ssh instance-2

3. vmインスタンスにアプリケーションを追加

debianに下記アプリケーションが入っていないのでインストールします。

git

$ sudo apt install git

node.js npm

$ sudo apt install nodejs npm

docker

$ sudo apt-get install docker.io

docker-compose

$ sudo apt-get install -y wget
$ sudo wget -O /usr/local/bin/docker-compose https://github.com/docker/compose/releases/download/1.25.5/docker-compose-Linux-x86_64
$ sudo chmod +x /usr/local/bin/docker-compose

nginx

$ sudo apt install nginx

4. cloud source repositoriesとgihubを連携させる

下記リンクを参考にしてgithubと連携します。

連携が完了したら一覧の中からvmインスタンスにクローンしたいリポジトリを選択し、
クローンを作成 > Google Cloud SDKからキャプチャのような手順に沿ってクローンします

5. .envファイルを設置

cloneしたリポジトリの中に、.envファイルを設置します。
frourioの場合、serverディレクトリ直下とserver/prismaディレクトリ直下に.envファイルが設置されているので、同じ場所に設置してください。

server/.env
API_ORIGINにはキャプチャで赤塗りした部分のIPを設定

SERVER_PORT=8080
BASE_PATH=/api
API_ORIGIN=http://--------
JWT_SECRET=supersecret
USER_ID=id
USER_PASS=pass

server/prisma/.env

DATABASE_URL=postgresql://root:root@localhost:5432/test

6. nginxによるリバースプロキシ

/api にリクエストしてきたら8080に、/ にリクエストしてきたら3000に振り分けます。

下記ファイルを/etc/nginx/sites-available/defaultに設置します。

server {
  listen 80 default_server;
  listen [::]:80 default_server;
  index index.html;

  location /api/ {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

設置したら、設定を読み込むため下記コマンドを実行します

sudo systemctl restart nginx

7. 起動

リポジトリのルート直下とserverディレクトリ直下でnpm iを実行後、dockerを起動させてビルドします。
このとき、npmスクリプトがターミナルを落としても永続化されるように、foreverをインストールしておきます。

forever

$ sudo npm install forever -g

$ docker-compose up -d
$ npm run build:client
$ npm run build:server
$ forever start -c "npm run start:client" ./
$ forever start -c "npm run start:server" ./

感想

今回は初めてGCEにデプロイするということで、とりあえず動くという状態を目的にしています。
そのため手作業で行う部分が多かったり、無駄なことをしている可能性があるので今後改善していく予定です。
うまくいったらまた次の記事で書きたいと思います。