🍣

Cloud Run + DockerでReact Appをデプロイする

6 min read

JPYC株式会社でエンジニアとして働いています、@hayato_omrです。
会社の業務でも使うことになったGoogle Cloud Runを少し触ってみたのでざっと内容を書いていこうと思います。
初心者エンジニアなのでミスってたりここ違うぞって部分があれば教えていただけると幸いです👀

Google Cloud Runとは

Cloud Run は、サーバーレスのコンテナ化されたマイクロサービスをデプロイしてスケールするためのフルマネージド コンピューティング環境です。

Cloud Run は、マシンのプロビジョニング、クラスタの構成、自動スケーリングについて心配することなく、サーバーレス HTTP コンテナをデプロイしてスケールするためのフルマネージド コンピューティング環境です。

ref : https://cloud.google.com/blog/ja/topics/developers-practitioners/cloud-run-story-serverless-containers

とのことです。

簡単にするとめちゃくちゃ簡単にコンテナをデプロイできて、スケーラブルなサービスですよということだと思います。

詳しいことは公式の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ファイルを作成

作っていきます。

.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作成

.docker/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 --from=build /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で自動デプロイも試しているのですが、エラーが出まくっているので成功したらまた記事出します。

参考記事

https://medium.com/swlh/deploying-a-react-app-to-google-cloud-run-with-github-actions-ae24ac6cb85a
https://cloud.google.com/container-registry/docs/pushing-and-pulling
https://cloud.google.com/blog/topics/developers-practitioners/cloud-run-story-serverless-containers

Discussion

ログインするとコメントできます