windows系统docker中将vue项目网站部署在nginx上

一、首先在windows系统上下载并安装docker，要下载windows版本

https://www.docker.com/products/docker-desktop/

PS：安装过程中需要WSL，我的是win11系统，直接提示了我安装就可以下一步了。其他windows系统版本我不知道是否需要单独安装。

安装完成docker后运行效果如下（可以在官网注册账号）：

二、接下来的步骤咱们尽量不用命令（因为是windows嘛，全部图形化操作），在docker这个应用程序中安装nginx

搜索nginx关键字，然后最好选择刀客团队发布的，最新版，更安全和稳定。如果没有可以选第三方发布的，用量比较大的。点击后面那个Pull，等待获取完成就算安装完了。

三、此时可以运行nginx镜像，生成一个应用容器了。

填写相关信息这里是个坑，如果你点击docker程序提供的选择路径按钮，将来运行会出错，提示找不到路径，所以得按如下的双斜杠形式填写：

1.宿主机default.conf路径：

C:\\Users\\mingyong.huang\\Desktop\\local\\default.conf

2.nginx运行时路径（即 default.conf），这里不明白是什么意思，去查一下nginx使用方法，这个路径基本都是固定的：

/etc/nginx/conf.d/default.conf

3.宿主机网站文件路径（即：是你的vue项目被编译后的网站静态文件存放路径）：

C:\\Users\\mingyong.huang\\Desktop\\www\\site1\\dist

4.nginx运行时路径（即 nginx运行网站的静态文件路径），也是固定的，同理，不懂去查一下nginx使用方法：

/usr/share/nginx/html

PS：至于网上有说什么nginx运行时还有个 /etc/nginx.conf需要配置，这次我没有用到也可以正常运行！此处咱们先不管它，等后期用到再说。

最后点击run按钮，大功告成！看下成果吧！

此时你就能看到生成的容器了，按照此方法，你想生成多少个容器都可以。是不是比虚拟机更轻量级，你还可以pull更多的应用，比如redis、mysql等等。

完美运行网站！

PS：vue项目如果用的history模式（而不是hash模式），直接F5刷新页面会报错404，解决办法就是在default.conf文件加一句话即可，try_files $uri $uri/ /index.html;

这个文件我是放在C:\\Users\\mingyong.huang\\Desktop\\local\\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;
        index  index.html index.htm;
        # 避免f5刷新后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;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

全部完毕！