Ubuntu 18.04 安装Nginx及部署Vue配置

1. 更新软件包

   sudo apt update
   sudo apt install nginx
   

   查看状态

   sudo systemctl status nginx

   

   状态显示绿色active表示正常运行

2. 防火墙开放相关端口

   sudo ufw allow 'Nginx Full'

   重新加载规则

   sudo ufw reload

   查看防火墙端口状态

   sudo ufw status

   

   出现Nginx Full说明状态中已更新规则

3. 测试安装

   远程访问:http://x.x.x.x

   本地访问http://localhost或者http://127.0.0.1

4. nginx 相关命令

   sudo systemctl stop nginx #停止
   
   sudo systemctl start nginx #启动
   
   sudo systemctl restart nginx #重启
   
   sudo systemctl reload nginx #重新加载
   
   sudo systemctl disable nginx #禁用Nginx
   
   sudo systemctl enable nginx #启用
   
   

5. 配置nginx部署Vue

   编译打包vue

   npm run build

   将dist中文件拷贝到ubuntu文件系统中

   vim /etc/nginx/sites-enabled/default

   server {
           listen 80;
           listen [::]:80;
   		server_name xxx.com; # 这里是网站的域名
   
   		root /var/www/xxx.com; # /vue/dist/ 打包后的dist目录
   
   location / {
                   try_files $uri $uri/ @router; # 指向下面的 @router否则会出现 404
                   index index.html index.htm;
           }
   			# 对应上面的 @router,主要Vue请求并不是真实路径，无法找到文件，需要重定向到 index.html 中，然后交给路由处理
           location @router {
                   rewrite ^.*$ /index.html last;
           }
   }
   

   重新加载 nginx 配置文件：

   nginx -s reload