Cloud Run + DockerでReact Appをデプロイする
JPYC株式会社でエンジニアとして働いています、@hayato_omrです。
会社の業務でも使うことになったGoogle Cloud Runを少し触ってみたのでざっと内容を書いていこうと思います。
初心者エンジニアなのでミスってたりここ違うぞって部分があれば教えていただけると幸いです👀
Google Cloud Runとは
Cloud Run は、サーバーレスのコンテナ化されたマイクロサービスをデプロイしてスケールするためのフルマネージド コンピューティング環境です。
Cloud Run は、マシンのプロビジョニング、クラスタの構成、自動スケーリングについて心配することなく、サーバーレス HTTP コンテナをデプロイしてスケールするためのフルマネージド コンピューティング環境です。
とのことです。
簡単にするとめちゃくちゃ簡単にコンテナをデプロイできて、スケーラブルなサービスですよということだと思います。
詳しいことは公式のDeveloper Blogを読んでください。
完成形
デプロイ時のデフォルトURLはこんな感じ
https://react-gcr-xxxxxxxxxxx.a.run.app/
構成
- React
- Docker
- Google Container Registry
- Google Cloud Run
本編
ディレクトリ構成
react-gcr/
├ .docker/
│ ├ build/
│ ├ Dockerfile
│ └ nginx.conf
├ src/
│ └ ...
└ ...
CRAでReactアプリケーションを作成
今回はデフォルトのアプリをデプロイするだけなのでJavaScript versionで作成してます。
Note: 自分はnpmが好きなので設定してます。
$ npx create-react-app react-gcr --use-npm
.dockerフォルダを作成
プロジェクトのrootディレクトリに移動して、.dockerフォルダを作成します。
nginxのconfファイルを作成
作っていきます。
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
# データ圧縮
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
brotli on;
brotli_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
brotli_static on;
server {
listen 8080;
root /usr/share/nginx/html;
index index.html;
server_name localhost;
server_tokens off;
location ~* \.(?:manifest|appcache|html?|xml|json)$ {
expires -1;
}
location ~* \.(?:css|js)$ {
try_files $uri =404;
expires 1y;
access_log off;
add_header Cache-Control "public";
}
location ~ ^.+\..+$ {
try_files $uri =404;
}
location / {
try_files $uri $uri/ /index.html;
}
}
}
Dockerfile作成
FROM node:12.16.3-alpine as build
WORKDIR /app
COPY . ./
FROM fholzer/nginx-brotli:v1.12.2
WORKDIR /etc/nginx
ADD nginx.conf /etc/nginx/nginx.conf
COPY /app/build /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]
React Appをbuild
$ npm run build
できたらbuildフォルダをDockerfileと同じ階層の.docker/ディレクトリに移動させてください。
docker build
ローカルでnginx+reactを立ち上げてブラウザで動作状況を確認する。
Note: .docker/ディレクトリに移動してから行ってください。
imageを作成
$ docker build -t react-gcr-app ./ --no-cache=true
imageをテストする
$ docker run -p 8080:8080 react-gcr-app
ブラウザでhttp://localhost:8080にアクセスして、Reactのデフォルト画面が出ていたら成功です。
Google Container Registoryにimageをpushする
前提条件:
- Google Cloud SDKのダウンロードが済んでいる
- Google Cloud Platformの課金が有効になっている
まずは、GCPのコンソールに移動し、新しいプロジェクトを作成します。
作成できたら、terminalに戻ってdockerのimageを再度buildします。
その時、先ほど作成したプロジェクトのプロジェクトidを使用します。
react-gcrのところは任意の名前でOKです。
$ docker build -t gcr.io/プロジェクトID/react-gcr ./
次に、認証系です。
ref: https://cloud.google.com/container-registry/docs/pushing-and-pulling
$ gcloud login
$ gcloud auth configure-docker
あとはGoogle Container Registoryに先ほど作成したimageをpushします。
この時のタグは先ほど作成したimageのタグと同じものを使用してください。
$ docker push gcr.io/プロジェクトID/react-gcr
ここまで進むとこんな感じ
Google Cloud RunにimageをDeploy
Container Registoryから、先ほど作成したimageを選択し、Cloud Runにデプロイするボタンを押下します。
Step1のサービス設定はそのままでOK。
Step2は未認証を許可にチェックを入れておく。
で、作成します。
作成できたら自動的にサービス詳細ページにリダイレクトするのですが、リージョンの隣のURLにhttps://xxxx.a.run.app的なものがあるのですが、これにアクセスすると先ほどpushしたアプリがみられると思います。
まとめ
Cloud Runを使うとめちゃくちゃ簡単にコンテナイメージにパッケージ化したアプリをデプロイできちゃいます。
あとはGithub Actionsで自動デプロイも試しているのですが、エラーが出まくっているので成功したらまた記事出します。
参考記事
Discussion