Basic config nginx with static CRA files in container
Perm Chao
Posted on March 2, 2021
การตั้งค่า 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;
}
}
2) เขียน Dockerfile ตามนี้
# --- ขั้นตอนการ build ไฟล์ให้ออกมาเป็น static files ---
FROM node:alpine as builder
# เพื่อให้เข้าถึงไฟล์ build ง่ายๆ ให้เก็บไฟล์ไว้ในโฟรเดอร์ที่เข้าถึงง่าย ๆ
WORKDIR /app
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
EXPOSE 80
# Run nginx บน foreground
CMD ["nginx", "-g", "daemon off;"]
3) สั่ง build ไฟล์
docker build \
-t my-react-app:v1.0 \
-f production.Dockerfile \
.
4) ลอง run
docker run -p 80:80 -t my-react-app:v1.0
ขอขอบคุณแหล่งที่มา https://medium.com/swlh/dockerizing-a-react-application-with-docker-and-nginx-19e88ef8e99a
💖 💪 🙅 🚩
Perm Chao
Posted on March 2, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.