使用docker镜像nginx进行项目部署

准备阶段

1. 准备任意一个项目，或者直接一个html文件
2. 下载docker，自行前往官网进行下载
3. 可以提前了解一下docker的数据卷挂载，可以将宿主机文件与docker容器中的文件进行一个同步，方便对nginx进行配置与日志查看

这篇教程不适合对docker完全不懂的人，不然你很难理解，甚至难以感受到docker进行项目部署的方便

我这里使用的是windows11操作系统进行演示，虽然docker有可视化窗口，但是我这里主要使用命令的形式教大家进行部署，我这里使用的是react项目

下载nginx

docker pull nginx

我的nginx版本为：1.27.0，不同版本的nginx目录结构可能有所不同

在项目中新建一个目录nginx

这个目录下在新建conf，logs目录，用来存放配置文件和日志文件

启动nginx容器

docker run -d -p 80:80 -v D:\我的项目\react项目之博客后台系统\App\nginx\logs:/var/log/nginx -v D:\我的项目\react项目之博客后台系统\App\nginx\conf:/etc/nginx/conf.d -v D:\我的项目\react项目之博客后台系统\App\dist:/usr/share/nginx/html/dist nginx

此时项目中的conf，logs，dist目录就已经和容器中同步了

在conf目录下新建一个default.conf文件，可以看到容器中也多了一个：

到这里就快成功了

编辑default.conf文件：

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html/dist;
        index  index.html index.htm;
        # 解决路由模式为history报404错误
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

配置文件修改必需重启容器后才生效哦

docker restart 容器ID或者容器名

或者可视化界面中：

测试是否成功

访问 http://localhost/