Ubuntu + Nginx部署Vue项目（跨域）+ 域名配置

适用于：MVVM前后台分离开发、部署、域名配置

前端部署：Vue + Nginx
后端部署：Spring Boot + Tomcat
这篇文章只讲前端部署

服务器版本：Ubuntu 20.04.3 LTS

操作系统：macOS 12.2.1

Step1：服务器上安装 Nginx

Nginx版本：nginx/1.18.0 (Ubuntu)

1、安装nginx

apt-get install nginx

2、检查nginx是否安装，输入如下命令后若出现版本号则安装成功

nginx -v

3、启动nginx

server nginx restart

注：这里如果出现报错，说明缺少nginx启动相关的依赖，根据报错提示，复制报错提示解决方案的命令，安装相关依赖重新执行上述启动命令即可！

4、在浏览器输入ip地址，若出现如下页面则启动成功

Step2：打包上传Vue项目到服务器

1、Vue项目配置跨域

在 vue.config.js 中进行如下配置：

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    /* 上线用（配置跨域） */
    proxy: {
      '/api': {
        target: '接口地址url',
        // 允许跨域
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

2、Vue项目打包：

npm run build

打包完成后，会在项目根目录下自动生成一个默认dist文件夹

3、上传至服务器指定文件夹下

这里我放在服务器的 /root/front_end 文件夹下
上传命令：

scp -r [dist文件夹所在的绝对路径] [服务器用户名]@[服务器IP地址]:[目标服务器文件夹绝对路径]

以我的举例：

Step3：配置 Nginx

1、在服务器上找到Nginx安装位置

默认在/etc/nginx

2、打开 /etc/nginx

cd /etc/nginx

3、修改nginx.conf

我使用的Vs Code进行文件创建并写入

方法：在Vs Code中安装以下插件，连接至服务器后，打开/etc/nginx

在 nginx.conf 中添加server，内容如下：

server {
        listen       3000;#自己设置端口号
        server_name  njupt_patent  ;#自己设置项目名称

        location / {
            root   /root/front_end/dist;#这里写vue项目的所在地址
            index  index.html;#这里是vue项目的首页，需要保证dist中有index.html文件
        }
        location /api/ {    # 会将接口地址/api开头的全部替换文下边配置的地址
            proxy_pass http://[服务器ip地址]:[端口号];            #接口服务地址
        }
        error_page   500 502 503 504  /50x.html;#错误页面
	}

4、重启nginx

nginx -s reload

Step4：授权访问服务器中的文件夹

在服务器中打开 dist 所在的文件夹的上级文件夹，如：我的 dist 文件夹的绝对路径为 /root/front_end/dist ，那么就打开：

cd /root/front_end

输入如下命令授权访问 dist 文件夹：

chmod -R 777 dist

Step5：访问已经部署好的Vue项目

在浏览器输入：

服务器IP地址:自己设置端口号/index.html

即可进行访问

Step6：域名配置

在上述 nginx.conf 中添加如下配置：

server{
		listen 80; #监听端口，http服务默认监听80端口
		server_name example.com; #域名，最好需要注册的域名，而且还要解析域名
		location / {
			proxy_pass http://example.com:[端口号];#代理转发地址
		}
	}