一、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
注意:别忘了安全组的放行