docker + nginx 实现web应用部署方案（以react为例）

最新推荐文章于 2025-06-10 09:02:29 发布

爱笑的路飞

最新推荐文章于 2025-06-10 09:02:29 发布

阅读量5.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： docker nginx 文章标签： docker nginx react web应用部署

本文链接：https://blog.csdn.net/weixin_42028742/article/details/82495270

本文详细介绍了如何利用docker和nginx部署react web应用。首先，通过yum安装docker，然后配置react项目并构建出dist目录。接着，编写nginx.conf以配置服务器，并在项目根目录创建Dockerfile。之后，构建docker镜像，并通过docker run命令启动镜像，将web应用暴露在7070端口。此外，还展示了如何使用-v参数映射物理存储以方便调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装docker

使用yum install docker -y，此处不再详细说明

2. 配置react项目

可以使用脚手架，构建完成后可以看到如下的项目目录

在根目录下执行npm install & npm run build，即可构建出dist目录，其中是打包后的文件，也是我们构建docker镜像要用的文件

3. 编写nginx.conf

在项目目录下创建conf页面，编写nginx.conf文件，配置如下：

daemon off;
user  root;
worker_processes  4;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       7070;
        server_name  localhost;

        location / {
            root   html/static;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }

	location ^~ /stat