Ubuntu配置Nginx部署Vue SPA项目
文章记录了部署Vue SPA项目后可从ip访问的过程，因域名访问需要备案暂未尝试，后续若实行亦会更新在此处。
系统为Ubuntu18.04。
Nginx
网页服务器。默认配置即支持systemd服务（守护进程）。
守护进程可见上一篇博客：
linux二探
# ubuntu 平台安装（默认启动）$ sudo apt install nginx# 查看服务状态$ sudo systemctl status nginx
# 启动$ nginx# 退出$ nginx stop# 修改配置后重启$ nginx -s reload# 可以配合 ps -ax | grep nginx 来查看当前 Nginx 使用的端口# ps是 Progress Status 的缩写# a代表all# x表示显示所有程序，不以终端机区分# | 是管道符号，表示ps和grep同时执行# grep命令是查找（Global Regular Expression Print），可以用正则
安装好后，访问<your ip>，看见nginx的欢迎页就表示nginx成功了。
Nginx 配置
nginx默认用户是www-data，配置文件目录是/etc/nginx/，全局配置文件是nginx.conf，网站资源目录是/var/www/。
www-data用户需要手动创建，且默认对以上目录无操作权限，需要手动赋权，赋权后才能修改配置、上传网站文件。
# 为用户赋权以修改配置、网站文件资源# -R 是递归，应用于目录下的目录及文件$ sudo chown www-data:www-data /etc/nginx /var/www -R# 切换用户$ su www-data# 输入密码...
linux系统中，文件的上传用 sftp 比较方便，可以用客户端 Transmit、Terminus 等。
部署SPA步骤
1、配置网站资源位置
因为80端口为http的默认端口，如果我们是要部署到ip的根目录下，查看配置nginx.conf、/sites_available/default，即可获知 80端口的root配置，此配置即指向了站点网页的目录。
比如是server.80的root是/var/www/html，Vue SPA打包后得到了一个dist文件夹，需将root配置后再加个/dist。
2、上传html资源
连接 sftp，前往/var/www/html，将打包好的 dist 文件夹丢到此处
3、保存配置，重启nginx
$ sudo nginx -t && sudo systemctl reload nginx
Nginx配置参考
贴2个我的配置文件以供参考，部分我所知的重要配置做了注释说明
# nginx.confuser www-data; # 可以管理nginx配置、资源的用户，默认为www-data，可修改为ubuntu等用户pid /run/nginx.pid;worker_processesauto;worker_rlimit_nofile 65535;# Load modulesinclude /etc/nginx/modules-enabled/*.conf; # 载入模块化的配置events {multi_accept on;worker_connections 65535;}http {charsetutf-8;sendfileon;tcp_nopush on;tcp_nodelay on;server_tokensoff;log_not_foundoff;types_hash_max_size 2048;types_hash_bucket_size 64;client_max_body_size 16M;# MIMEincludemime.types;default_type application/octet-stream;# Loggingaccess_log /var/log/nginx/access.log;error_log /var/log/nginx/error.log warn;# Load configsinclude /etc/nginx/conf.d/*.conf;include /etc/nginx/sites-enabled/*; # 载入各站点的配置}
# sites-available/default.confserver {listen 80 default_server; # 配置80端口，并将此配置设为默认服务listen [::]:80 default_server;root /var/www/html/dist; # 指向目录/var/www/html/distindex index.html index.htm index.nginx-debian.html; # 指向文件index.htmlserver_name _;# 重定向配置，当Vue项目为history模式时需配置# 将所有根目录的返回都指向index.html避免404，交由前端页面处理404状态location / {try_files $uri $uri/ /index.html;}# 代理配置，将以 /api开头的请求指向api服务器，解决前后端分离的跨域问题location ^~/api {proxy_pass http://api.you-/api}}
