Linux环境下部署Nginx+vue

一、Nginx环境

1.下载nginx

在以下网址下载：

http://nginx.org/en/download.html

在usr/local目录下新建nginx文件夹，并解压（注意先cd到目标目录下）：

tar zxvf nginx-1.24.0.tar.gz

2.安装依赖

yum -y install pcre-devel

yum -y install openssl openssl-devel

3.安装nginx

进入/usr/local/nginx/nginx-1.24.0目录，输入以下指令：

./configure

make && make install

安装完成后，Nginx的可执⾏⽂件位置位于/usr/local/nginx/sbin/nginx

4.启动nginx

进入目录/usr/local/nginx/sbin，输入：

./nginx

其它nginix命令：

查看nginx是否安装成功：whereis nginx
查看nginx进程：ps -ef | grep nginx
关闭nginx进程：./nginx -s stop
重启nginx进程：./nginx -s reload
强制停止nginx进程：killall nginx

5.启动时可能会遇到的问题

第一种情况：

启动没报错，但是网页访问不了，可能是因为服务器的安全组，需要开放对应的端口。

第二种情况：

Nginx 运行用户对日志目录的写权限不足，导致无法创建 PID 文件。

可以使用以下指令查看权限：

ls -ld /usr/local/nginx/logs/

日志目录 /usr/local/nginx/logs/ 的权限为 drwxr-xr-x，所有者为 root 用户和 root 用户组。这就是问题所在，因为 Nginx 以 nobody 用户身份运行，而不是 root 用户。

为了解决这个问题，需要更改日志目录的所有者和用户组，使其对 Nginx 运行用户可写。你可以执行以下命令来修改权限：

chown -R nobody:nobody /usr/local/nginx/logs/

上述命令将/usr/local/nginx/logs/日志目录的所有者和用户组都更改为 nobody，并且递归地修改所有子文件和子目录的所有者和用户组。这样，Nginx 将能够在启动时生成 PID 文件和写入日志文件。

二、打包vue项目

1.修改代码

对于vue项目，打包前需要修改发送请求的ip地址为服务器的ip地址

注意：代码中写死的地址（如图片上传）也需要修改

2.打包

在根目录的命令行窗口输入：

npm run build

打包完成，在根目录生成一个dist文件夹

在/usr/local/server下新建vue文件夹，将这个文件夹上传到服务器的该目录下

三、nginx反向代理

确保之前已经完成了nginx的配置和dist文件夹的上传

找到nginx的配置文件/usr/local/nginx/conf/nginx.conf

    server {
        listen       这里填写nginx监听的端口;
        
        # 指定前端项目所在的位置
        location / {
            root   /usr/local/server/vue/dist; #dist文件所在目录
            index  index.html index.htm;
            try_files $uri $uri/ /iindex.html;
        }
        
        location /api { #这里的作用是将识别/api并替换
            proxy_pass http://这里填写代理的服务器ip:和端口;
            rewrite ^/api/(.*)$ /$1 break;
        }
    }

将以上代码复制替换server部分

nginx服务可以监听多个端口，如果需要监听多个端口，监听几个端口就复制几个server即可

修改完后，保存退出，进入sbin目录重启：

./nginx -s reload

注意：别忘了安全组的放行