1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

パーソンリンクAdvent Calendar 2022

Day 18

フロントエンドコンテナを停止させないようにする(ReactやVue)

Last updated at Posted at 2022-12-14

内容

案件作業でコンテナのことをなんとなく理解した状態でECSの環境構築を行なっていした
その時に、フロントのタスクが開始はするのですが、なぜかすぐ落ちてしまい原因がわからずにいました。

僕みたいにまだコンテナのことをあまり理解していない状態でECSの構築を行なっている人のためになればと思いこの記事を書きます。

原因

コンテナを開始してコンテナがやるべき処理が完了しているためタスクが終了してしまっている

この原因で勘違いしてはいけないことは、何かエラーが起きてコンテナが停止してしまっているのではないかと思うことです。
ですが、実際は正常に終了しています。
問題なのはコンテナに処理をし続けさせることです。
そのためにどうすればいいのかというと、webサーバーのイメージをフロントのイメージに入れてあげる必要があります。

解決法

コンテナのイメージを構築後、webサーバーのイメージ(proxy)を入れることです。
実際にコードを見た方がわかりやすいと思います

FROM node:16.13.0-alpine3.12 as builder
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY ./front/package.json /usr/src/app/package.json
RUN yarn install --silent

# ソースを作業フォルダにコピーして、ビル
COPY ./front /usr/src/app
RUN yarn run build

COPY ./health.html /usr/src/app/build

#nodeのイメージの後にnginxのイメージを置く
FROM nginx:1.21.1-alpine
# nginxの設定を削除して、アプリで設定したファイルをコピー
RUN rm -rf /etc/nginx/conf.d
COPY ./docker/react/conf /etc/nginx

# 上記の生成されたアプリのビルド成果物をnginxのサンプルアプリが使用していたフォルダに
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

EXPOSE 3001

CMD ["nginx", "-g", "daemon off;"]

このようにしてあげればnginxが動き続けるのでコンテナが終了することがありません

また、今回はnginxの設定ファイルは載せていませんが、たくさん設定ファイルの書き方についての記事をあげている方がいるのでその人たちに任せます

最後に

後から考えれば当たり前ですが、初めの方はやっぱり難しいですよね〜
この記事でコンテナのイメージをつかんでもらえたらなと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?