侧边栏壁纸
博主头像
996worker

祇園精舎の鐘の聲, 諸行無常の響き有り。

  • 累计撰写 189 篇文章
  • 累计创建 46 个标签
  • 累计收到 8 条评论

目 录CONTENT

文章目录

Deploy React.js & Nginx project on Heroku platform with Docker

996worker
2022-09-19 / 0 评论 / 0 点赞 / 17 阅读 / 1,430 字
温馨提示:
本文最后更新于 2022-09-19,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

0. Abstract

We deployed a React project to the Heroku platform with Docker.

The React app is running on Nginx.

1. Dockerfile

FROM node:14 as build

WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH

COPY package*.json ./
RUN npm install

COPY src ./src
COPY public ./public
COPY config.js ./config.js

#ENV PORT=$port
#EXPOSE $PORT
#RUN PORT=5000 npm start

RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
ENV PORT=$port
EXPOSE $PORT

COPY nginx.conf /etc/nginx/conf.d/default.conf
# CMD ["nginx", "-g", "daemon off;"]
CMD sed -i -e 's/$PORT/'"$PORT"'/g' /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'

2. Nginx config file

This config file should put in the project dir.
This config file solved path 404 problem caused by “BrowserRoute” element of the React.

server {
  listen 0.0.0.0:$PORT;
  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

3. shell script file

I crafted this file to speed up deployment:

#!/bin/sh
# author: 996 worker

# Install Heroku CI and docker first!
# then, please login the heroku
heroku login

# then, login the heroku container
heroku container:login

# then build the docker thing
docker build -t frontend-app .

# tag the image to heroku repo
docker tag frontend-app:latest registry.heroku.com/alphecca-frontend/web

# push the repo to heroku
docker push registry.heroku.com/alphecca-frontend/web

# release the container
heroku container:release web --app alphecca-frontend

# clean-up
docker rmi frontend-app
docker rmi registry.heroku.com/alphecca-frontend/web
0

评论区