DEV Community

Mossie Chao
Mossie Chao

Posted on • Updated on


Basic config nginx with static CRA files in container

การตั้งค่า Dockerfile กับ React เบื้องต้น


  • src/
  • production.Dockerfile
  • nginx.conf
  • package.json


1) เตรียมไฟล์ nginx

server {
 listen 80;
 location / {
  root   /usr/share/nginx/html;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html;
 error_page   500 502 503 504  /50x.html;
 location = /50x.html {
  root /usr/share/nginx/html;
Enter fullscreen mode Exit fullscreen mode

2) เขียน Dockerfile ตามนี้

# --- ขั้นตอนการ build ไฟล์ให้ออกมาเป็น static files ---
FROM node:alpine as builder
# เพื่อให้เข้าถึงไฟล์ build ง่ายๆ ให้เก็บไฟล์ไว้ในโฟรเดอร์ที่เข้าถึงง่าย ๆ
COPY . /app
# เพื่อให้สั่งทำงานบางคำสั่งได้โดยตรงเช่นพวก webpack, carco, etc
ENV PATH /app/node_modules/.bin:$PATH
# ลง packages ต่างๆ ใน package.json
RUN yarn
# สั่งสร้างไฟล์ static files
RUN yarn build

# --- ขั้นตอนการตั้งค่า nginx ---
FROM nginx:alpine
# คัดลอกไฟล์มาจาก container ที่แล้ว
COPY --from=builder /app/build /usr/share/nginx/html
# ใส่ nginx config ที่เราตั้งเอง
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d
# Run nginx บน foreground
CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode

3) สั่ง build ไฟล์

docker build \
-t my-react-app:v1.0 \
-f production.Dockerfile \
Enter fullscreen mode Exit fullscreen mode

4) ลอง run

docker run -p 80:80 -t my-react-app:v1.0
Enter fullscreen mode Exit fullscreen mode


Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git