server {
listen 80;
listen [::]:80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
docker build -t my-react-app .
docker run -p 80:80 my-react-app
# 使用官方的Node镜像作为基础镜像
FROM node:18.20.4-alpine as build-stage
# 设置工作目录
WORKDIR /app
# 复制 package.json 和 yarn.lock
COPY package.json yarn.lock ./
# 安装依赖
RUN yarn install --frozen-lockfile
# 复制项目文件
COPY . .
# 构建 React 应用
RUN yarn build
# 使用 Nginx 作为服务器,部署应用
FROM nginx:alpine
# 将构建好的React应用静态文件复制到Nginx的默认HTML目录
COPY --from=build-stage /app/build /usr/share/nginx/html
# 将自定义的Nginx配置文件复制到Nginx的配置目录
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 暴露80端口
EXPOSE 80
# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]