linux 安装 nginx 以及部署 vue 到服务器
Linux环境下Nginx服务器
- 先查看Linux服务器下有没有安装:GCC、automake、pcre、zlib和openssl
- 如果安装后会显示各自的版本号
//查看openssl rpm -qa openssl //查看zlib rpm -qa zlib //查看pcre rpm -qa pcre
- 如果没有安装以上三个库, 可以使用一下命令安装
yum -y install gcc gcc-c++ automake pcre pcre-devel zlib zlib-devel openssl openssl-devel
- 下载Nginx 并解压
- 通过官网下载,http://nginx.org/en/doload.html 可以选择对应的版本下载
- 通过Linux 命令下载
wget http://nginx.org/download/nginx-1.16.1.tar.gz
// 进入 opt 文件 cd /opt // 创建nginx 文件夹下载 nginx wget http://nginx.org/download/nginx-1.16.1.tar.gz // 解压文件 tar -xvf nginx-1.16.1.tar.gz
解压完之后,nginx 下会多出一个 Nginx-1.16.1 包含一下文件 auto:存放了大量脚本文件,和configure脚本程序有关。 conf:存放了Nginx服务器的配置文件,包含了Nginx服务器的基本配置文件和对部分特性的配置文件。 configure:Nginx服务器的自动脚本程序,运行configure自动脚本将会完成两项工作: 1、检查环境,根据环境检查结果生成C代码; 2、生成编译代码需要的makefile文件。 html:存放了两个后缀名为.html的静态文件。 man:存放了Nginx服务器的帮助文档,可通过 man nginx进行查看。 src:存放了Nginx服务器的所有源代码
- 安装nginx 服务器
如果安装不成功的话,可能是因为 pcre zlib openssl 未安装成功导致
// opt/Nginx文件夹下创建新文件夹Nginx-1.16.1_install
cd /opt/Nginx
mkdir Nginx-1.16.1_install
//进入之前解压后得到的文件夹nginx-1.16.1
cd nginx-1.16.1
//运行configure脚本程序,可以直接运行./configure,也可以通过--prefix=path 指定nginx的安装目录
./configure --prefix=/opt/Nginx/Nginx-1.16.1_install
//运行完成后,该文件夹下多出一个文件---Makefile,此时执行make指令进行源代码编译,编译过程中屏幕会有编译全过程
make
//编译完成后,执行make的install命令安装Nginx服务器
make install
-
安装完成之后会在Nginx-1.16.1_install 目录下看到这几个文件
conf:该目录存放了Nginx的所有配置文件,该文件夹下包含nginx.conf文件,它是Nginx服务器的住配置文件,其他文件则是用 来配置Nginx的相关功能。html:该目录存放了Nginx服务器在运行过程中调用的一些html文件。
logs:该目录存放了Nginx服务器的日志。
sbin:该目录中只包含了一个文件-nginx,它就是Nginx服务器的主程序
-
修改nginx.conf 这个文件并启动nginx
- 我们可以通过命令修改
// 修改nginx.conf文件中端口,如修改成81 cd /opt/Nginx/Nginx-1.16.1_install/conf vim nginx. // 以下是要改文件下的内容 server { listen 80; // 默认监听端口为 80, 可自行更改 server_name localhost; // 默认监听地址为 localhost, 可自行更改 #charset koi8-r; #access_log logs/host.access.log main; location / { root /root/vue;// 此是你vue npm run build 打包后放置静态文件dist的路径 index index.html index.htm; autoindex on; // 开启nginx目录浏览功能 autoindex_exact_size off; // 文件大小从KB开始显示 charset utf-8; // 显示中文 // 跨域配置 add_header 'Access-Control-Allow-Origin' '*'; add_header Access-Control-Allow-Credentials true; } }
- 通过软件
Xftp
修改
可以借鉴一下这个作者写的:https://blog.csdn.net/weixin_44953395/article/details/112900516 - 启动 nginx
//在文件下/opt/Nginx/Nginx-1.16.1_install/sbin 输入命令启动 ./nginx // 访问的话,通过ip 访问就行
通过服务器IP就可以访问了
-
nginx 的一些命令操作
- 停止nginx
// 1. 等nginx 处理完任务停止 ./nginx -s quit // 2. 先查出nginx 进程id 再使用 kill 命令强制杀掉进程--> ./nginx -s stop // 输入命令:查看进程号 ps aux|grep nginx // 杀死进程: kill -term xxxx/ kill -int xxxx // [root@localhost ~]# kill -term 进程编号 // [root@localhost ~]# kill -int 进程编号
- 强制停止: pkill -9 nginx
[root@localhost ~]# pkill -9 nginx
- 重启nginx
// 先将nginx 给停止,然后再重启 ./nginx -s quit ./nginx // 如果我们需要重新加载配置文件,对 nginx.conf 修改后,要想让配置生效需要重启 nginx,使用-s reload不用先停止 nginx 就可以再启动 nginx 即可将配置信息在 nginx 中生效 ./nginx -s reload
-
nginx 代理 vue
nginx 代理 vue
- vue打包后,因为开发环境设置代理 proxy 的原因, 使得访问打包页面 请求不同ip数据时出现了跨域问题。
- nginx代理vue的意义: 在于把开发环境中的代理 proxy: {‘/api’: … 的/api, 换成生产环境中的地址 即在服务器里面nginx的代理
// /api/ 为vue中代理的值; // proxy_pass 需要代理的ip地址 location /api/ { rewrite ^.+api/?(.*)$ /$1 break; // 重定向 proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 可省略结束 # 必填 proxy_pass http://192.168.1.10:8888/; #node api server 即需要代理的IP地址 }
遇到问题:Nginx 403 forbidden 错误的原因及解决方法
产生原因:由于启动用户和nginx的工作用户不一致所致
-
确认原因:
- 查看启动的用户是:nginx/root 启动
// 输入命令:查看进程号 ps aux|grep nginx
如下图所示
- 修复问题:可以在文件内改,也可以通过命令修改
vim etc/nginx.conf
修改地方:
# user nobody; // 将 user nobody 改为 user root worker_processes 1;
- 注意:如果这里文件有问题也会报 403
server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; } }