nginx安装及部署Vue项目

今天在使用nginx部署Vue项目时，遇到了一些坑，记录下来希望能帮助到别人。

我是在windows服务器上使用的nginx，windows中最初使用的几条命令在官网上都有，如:

nginx -s stop
nginx -s quit
nginx -s reload
nginx -s reopen

关于在windows中使用nginx的文档：http://nginx.org/en/docs/windows.html，写的比较详细，可以先看一下。

下载

从官网下载即可（http://nginx.org/en/download.html）选择windows稳定版本

![D51SA}P]`D820F1@@I0}~71.png](https://upload-images.jianshu.io/upload_images/11835085-e3a2befef77dd350.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

下载后解压放到服务器上，一定不要直接打开nginx.exe，也不要使用记事本编辑config文档。

直接打开nginx.exe关闭会比较麻烦，用记事本打开会改变配置文件的格式，从网上资料查到的，有些道理。

部署

使用cmd命令进入文件夹，这时候没有开启nginx服务，可以运行命令
tasklist /fi "imagename eq nginx.exe"

输出结果：

信息: 没有运行的任务匹配指定标准。

C)1EI2_7X{)$M2H%%T59U7N.png

接下来启动nginx，运行start nginx

再运行命令 tasklist /fi "imagename eq nginx.exe"
输出结果应该类似于这样：

映像名称                       PID 会话名              会话#       内存使用
========================= ======== ================ =========== ============
nginx.exe                    27388 RDP-Tcp#0                  2      5,664 K
nginx.exe                    31660 RDP-Tcp#0                  2      5,964 K

这就是启动nginx成功了，如果不是这样的话去log文件夹下去看error.log文件查看具体原因，可能是端口被占用等问题，也容易解决。

端口被占用的话可以去conf / nginx.conf修改下端口号，默认的端口号是80，可以修改为其他的。

80端口是http的默认端口，比如部署的服务器是123.45.67.89，nginx部署成功后访问http://123.45.67.89就会跳转到指定的网页，80可以忽略掉。而使用其他端口的话就需要加上端口号才能访问，如果使用8080端口就要输入http://123.45.67.89:8080才行。这是我刚刚理解的。

Vue项目部署

vue执行npm run build后会将整个项目打包成dist文件夹。

可以将dist文件夹直接复制到nginx文件目录下的html文件夹中，同时修改nginx配置文件指向的文件路径。

    server {
        listen       8088;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            # 修改这里的路径
            root   C:/Users/Administrator/Desktop/nginx-1.18.0/html/dist;
            index  index.html index.htm;
            autoindex on;       #开启nginx目录浏览功能
            autoindex_exact_size off;   #文件大小从KB开始显示
            charset urf-8;
            add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }
    ...
    }

我这里端口用的8088，配置文件修改后必须重启nginx，执行nginx -s reload命令重启，接下来访问对应的网址，如http://123.45.67.89:8088即可访问到vue网页。

网上文章的质量太差了，一个小小的问题解决方法都是绕来绕去的，所以还是看官方文档比较好。

注意事项

不要双击打开nginx.exe，使用命令行操控
最好不要使用记事本打开配置文件，notepad++应该可以
配置文件修改后需要重启nginx才能生效
端口被占用，可以更换nginx的端口，这样比较简单
通过error.log查看错误，解决问题

参考自：
Nginx Windows详细安装部署教程(https://www.cnblogs.com/taiyonghai/p/9402734.html)
nginx for Windows(http://nginx.org/en/docs/windows.html)

最后编辑于：2020.09.27 13:52:09