共计 4213 个字符，预计需要花费 11 分钟才能阅读完成。
部署环境：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 automake
sudo apt-get install libpcre3 libpcre3-dev装置 zlib 库
sudo apt-get install openssl
sudo 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/local
tar -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.4
make
编译胜利之后，就能够装置了，输出以下命令：
make install
6. 启动 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/html
rm -rf index.html
unzip dist.zip执行之后如图
4. 批改 nginx 配置文件
进入 cd /usr/local/nginx/conf 目录可批改 nginx 的配置文件：
cd /usr/local/nginx/conf
vim 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 加上刚刚配置的端口，记得批改成你本人的哟~