使用 Docker 部署 React + Nginx 应用教程

目录

    • [1. 创建react项目结构](#1. 创建react项目结构)
    • [2. 创建 .dockerignore](#2. 创建 .dockerignore)
    • [3. 创建 Dockerfile](#3. 创建 Dockerfile)
    • [4. 创建 nginx.conf](#4. 创建 nginx.conf)
    • [5. 构建和运行](#5. 构建和运行)
    • [6. 常用命令](#6. 常用命令)

1. 创建react项目结构

2. 创建 .dockerignore

plaintext:.dockerignore 复制代码
# 依赖目录
node_modules
npm-debug.log

# 构建输出
dist
build

# 开发环境文件
.git
.gitignore
.env
.env.local
.env.development
.env.test
.env.production

3. 创建 Dockerfile

dockerfile:Dockerfile 复制代码
# 构建阶段
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

4. 创建 nginx.conf

nginx:nginx.conf 复制代码
server {
    listen 80;
    server_name localhost;
    
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

完整的项目结构

5. 构建和运行

在项目根目录下执行以下命令:

bash 复制代码
# 构建Docker镜像
docker build -t react-nginx .

docker run -d -p 80:80 react-nginx

6. 常用命令

bash 复制代码
# 查看运行中的容器
docker ps

# 停止容器
docker stop <container_id>

# 查看容器日志
docker logs <container_id>

# 进入容器内部
docker exec -it <container_id> sh
相关推荐
m_1368720 小时前
Mac Intel 芯片部署 YOLO(Docker 方式,支持离线打包与 Compose 管理)
yolo·macos·docker
潘晓可21 小时前
Nextcloud 实战:打造属于你的私有云与在线协作平台
docker
衍余未了21 小时前
centos9 docker启动不起来,docker启动发生堵塞问题!
运维·docker·容器
LJC_Superman21 小时前
Web与Nginx网站服务
运维·服务器·前端·网络·数据库·nginx·vim
ʚʕ̯•͡˔•̯᷅ʔɞ LeeKuma1 天前
nginx常用命令(备忘)
服务器·nginx
tianyuanwo1 天前
Docker Registry 实现原理、适用场景、常用操作及搭建详解
运维·docker·容器·registry
误入运维泥潭1 天前
LVS、Nginx与HAProxy负载均衡技术对比介绍
nginx·lvs·haproxy·keealived
专注代码七年1 天前
Docker 本地开发环境搭建(MySQL5.7 + Redis7 + Nginx + 达梦8)- Windows11 版 2.0
nginx·docker·容器
帅得不敢出门1 天前
Docker安装Ubuntu搭建Android SDK编译环境
android·ubuntu·docker
牛奶咖啡131 天前
Nginx +Tomcat架构的必要性与应用示例
nginx·tomcat·nginx的静态动态资源配置·root与alias的区别·静态及负载均衡动态资源配置