linux环境下Nginx下载配置，及vue项目前端部署教程

下载配置Nginx

1.创建下载路径

mkdir /usr/local/nginx
1

2.进入nginx路径下

 cd  /usr/local/nginx
1

3.通过wget命令下载nginx压缩包

这里看官网的稳定版本号

wget -c https://nginx.org/download/nginx-1.22.0.tar.gz	
#没安装过依赖的看下面Q&A，不知道有没有的可以直接粘贴下面安装依赖的命令
1
2

8.在/usr/local/nginx，解压 nginx-1.22.0.tar.gz

tar -zxvf nginx-1.22.0.tar.gz
1

9.进入解压文件，默认配置、编译安装

cd nginx-1.22.0
#默认配置
./configure
#编译
make
#安装
make install
1
2
3
4
5
6
7

4.启动nginx服务

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
1

4.完成

vi /usr/local/nginx/conf/nginx.conf#这是配置文件
1

访问ip，端口是80

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-97efYabN-1655913743743)(C:\Users\liu\AppData\Roaming\Typora\typora-user-images\image-20220622211550792.png)]

部署前端项目

npm run build后把dist文件夹改名html上传到/usr/local/nginx即可。

访问ip，如下：

部署后端项目

TODO

Q&A

dist文件夹应该放在哪个路径？

看配置文件：

server {
	listen       80;
	server_name  localhost;
	
	location / {
		root   html;	#这里就是项目文件的相对路径,是/usr/local/nginx/html
		index  index.html index.htm;
    }
}

1
2
3
4
5
6
7
8
9
10

怎么部署多个项目？

修改配置文件，把dist放在正确的文件夹就行：

server {
	listen       80;
	server_name  localhost;
	
	location /projectA {	#这里是ip+'/projectA'
		alias   projectADist/;	#这里就是项目文件的相对路径,注意改成了alias
		index  index.html index.htm;
    }
    
    location /projectB {	#这里是ip+'/projectB'
		alias   projectBDist/;	#这里就是项目文件的相对路径，注意改成了alias
		index  index.html index.htm;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Nginx需要什么依赖？

需要的依赖，如果没有就要装

#安装gcc-c++
yum install gcc-c++
#安装pcre pcre-devel
yum install -y pcre pcre-devel
#安装zlib
yum install -y zlib zlib-devel
#安装open ssl
yum install -y openssl openssl-devel
1
2
3
4
5
6
7
8

一些命令？

cd /usr/local/nginx/sbin/
./nginx  启动
./nginx -s stop  停止
./nginx -s quit  安全退出
./nginx -s reload  重新加载配置文件
ps aux|grep nginx  查看nginx进程
1
2
3
4
5
6

参考：https://www.kuangstudy.com/bbs/1353634800149213186