Reactのアプリを簡単にDocker上のnginxに搭載してみた

目標

Reactのcreate-react-appで作成したアプリをnginxに載せてみました。
簡単にできたのでメモしておきます。

Reactアプリの作成

これはcreate-react-appでサクッと作成しましょう。
DockerでReactの環境を作成してみたでDocker上で構築できるはずです。
アプリが作成できたらyarn buildでnginxに載せるファイルを出力しましょう。

niginxのDockerfile

nginxのDockerfileです。
yarn buildで出力したファイルとnginxの設定ファイルをコピーしています。

FROM nginx:1.17

COPY ./app/build /opt/app/

COPY ./nginx.conf /etc/nginx/nginx.conf

CMD ["nginx", "-g", "daemon off;", "-c", "/etc/nginx/nginx.conf"]

nginxの設定ファイル

locationはbuildしたファイルを置く場所に設定しましょう。

nginx.conf

user  nginx;
worker_processes  auto;

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;

    keepalive_timeout  75;

    server {
        listen 80;
        charset utf-8;

        location /{
            root   /opt/app/;
            index  index.html;
        }
    }
}

まとめ

あとは、nginxのDockerfileをbuildしてコンテナを立ち上げれば完了です。