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.conf
user                 www-data; # 可以管理nginx配置、资源的用户，默认为www-data，可修改为ubuntu等用户
pid                  /run/nginx.pid;
worker_processes     auto;
worker_rlimit_nofile 65535;

# Load modules
include              /etc/nginx/modules-enabled/*.conf; # 载入模块化的配置

events {
    multi_accept       on;
    worker_connections 65535;
}

http {
    charset                utf-8;
    sendfile               on;
    tcp_nopush             on;
    tcp_nodelay            on;
    server_tokens          off;
    log_not_found          off;
    types_hash_max_size    2048;
    types_hash_bucket_size 64;
    client_max_body_size   16M;

    # MIME
    include                mime.types;
    default_type           application/octet-stream;

    # Logging
    access_log             /var/log/nginx/access.log;
    error_log              /var/log/nginx/error.log warn;

   
    # Load configs
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*; # 载入各站点的配置
}

# sites-available/default.conf
server {
	listen 80 default_server; # 配置80端口，并将此配置设为默认服务
	listen [::]:80 default_server;

	root /var/www/html/dist; # 指向目录/var/www/html/dist
	index index.html index.htm index.nginx-debian.html; # 指向文件index.html

	server_name _;

	# 重定向配置，当Vue项目为history模式时需配置
	# 将所有根目录的返回都指向index.html避免404，交由前端页面处理404状态
	location / {
      try_files $uri $uri/ /index.html;
	}
	# 代理配置，将以 /api开头的请求指向api服务器，解决前后端分离的跨域问题
    location ^~/api {
      proxy_pass http://api.you-host.com/api
    }

}