部署环境：Ubuntu 20.04 LTS
本地环境：Windows 10
一、下载nginx
应用的版本是：nginx-1.19.4.tar.gz
官网地址：http://nginx.org/en/download.html
百度网盘：
链接: https://pan.baidu.com/s/1RNdH... 提取码: 7349
二、装置nginx
1.连贯服务器
能够应用xshell工具连贯服务器，或者某个命令行工具都行（gitbash，cmd ...）。应用命令行工具执行以下命令连贯服务器，root是用户名，8.129.38.87 是你的服务器公网IP，而后输出明码即可。
ssh root@8.129.38.87 -p 222.配置nginx装置所需的环境
装置两个依赖库
sudo apt-get install autoconf automakesudo apt-get install libpcre3 libpcre3-dev装置zlib库
sudo apt-get install opensslsudo apt-get install libssl-dev3.将nginx压缩包上传到服务器并解压
在本地关上刚刚下载好的nginx压缩包所在目录，关上命令窗口，应用 scp 命令上传资源，我这里上传到服务器的 /usr/local 目录下，这里会让你输出服务器登录明码
scp ./nginx-1.19.4.tar.gz root@8.129.38.87:/usr/local切换到服务器命令窗口，能够看到刚刚上传的压缩包，执行解压命令解压安装包
cd /usr/localtar -zxvf nginx-1.19.4.tar.gz4.执行默认配置
解压之后，进入解压后的文件夹，执行 cd nginx-1.19.4
而后进行配置，举荐应用默认配置，间接执行 ./configure 就好了，如下图所示：
5.编译装置nginx
在当前目录 /usr/local/nginx-1.19.4 进行编译。输出 make 按回车即可。如果编译出错，请查看是否后面的4个装置都没有问题。
cd /usr/local/nginx-1.19.4make编译胜利之后，就能够装置了，输出以下命令：
make install6.启动nginx
进入 /usr/local/nginx/sbin 目录，输出 ./nginx 即可启动nginx
cd /usr/local/nginx/sbin./nginx如果启动报错：nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)，阐明80端口被占用，应用如下命令：
fuser -k 80/tcp敞开nginx
cd /usr/local/nginx/sbin./nginx -s quit# 或者 ./nginx -s stop重启nginx
cd /usr/local/nginx/sbin./nginx -s reload查看nginx过程
ps aux|grep nginx7.设置nginx开机启动
在 rc.local 减少启动代码即可
vim /etc/rc.local# 编辑文件，在文件底部减少 /usr/local/nginx/sbin/nginx 这行内容保留退出三、部署Vue.js我的项目
1.关上vue我的项目，执行打包
npm run build完结后进入 dist 文件夹，将所有打包后果选中，打包压缩成 dist.zip
2.将打包后果压缩包上传到服务器
scp ./dist.zip root@8.129.38.87:/usr/local/nginx/html3.解压缩服务器上的 dist.zip 压缩包
解压之前，先将 /usr/local/nginx/html 目录下的 index.html 删除掉
cd /usr/local/nginx/htmlrm -rf index.htmlunzip dist.zip执行之后如图
4.批改nginx配置文件
进入 cd /usr/local/nginx/conf 目录可批改nginx的配置文件：
cd /usr/local/nginx/confvim nginx.conf按键盘 i 进行编辑，编辑实现按 Esc 退出编辑，再输出 :wq 保留并退出
贴上一个完整版的，其中有序号表明的是正文阐明，次要更改了 server 的内容
nginx.conf
#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { # 1.监听 2001 端口 listen 2001; # 2.这是你部署的IP，你服务器的公网IP server_name 8.129.38.87; # 3.这里配置前端打包文件的映射门路 root /usr/local/nginx/html; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; try_files $uri $uri/ /index.html; index index.html index.htm; } # 4.解决跨域问题，将须要代理的后端地址写在 proxy_pass 前面 # 将所有的 http://8.129.38.87:2001/front 申请，转发到 http://edufront.lagou.com/front location /front { proxy_pass http://edufront.lagou.com; } # 5.同理，可配置多个 location ，对于nginx代理的相干配置请自行网上查找 location /boss { proxy_pass http://eduboss.lagou.com; # 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; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #}}另外，如果须要配置多个vue我的项目，只需增加多个 server 配置即可。
把nginx上面的另外一个 server 的正文勾销，再进行批改配置即可：
5、在服务器治理台凋谢 2001 端口
2001 端口为咱们刚刚在 nginx.conf 配置文件中监听的端口
登录云服务器治理台，增加平安组规定
6.重启nginx
进入 /usr/local/nginx/sbin/ 目录，执行重启命令，让配置失效：
cd /usr/local/nginx/sbin/./nginx -s reload查看nginx过程：
ps aux|grep nginx7.拜访你的网站
在浏览器输出网址 http://8.129.38.87:2001/ 拜访你的网站，这是我的服务器IP加上刚刚配置的端口，记得批改成你本人的哟~