Linux服务器使用Nginx部署前端项目+ 域名配置

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

前端：Vue
后端：Spring Boot

这篇文章只讲前端部署，后端部署戳这里

Step1：服务器上安装 Nginx

1、安装nginx

# Ubuntu
apt-get install nginx
# centOS
yum install nginx

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

nginx -v

3、启动nginx

systemctl start nginx

# 设置nginx在系统启动时自动启动
systemctl enable nginx

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

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

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

1-1、Vue2项目配置跨域

在 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': ''
        }
      }
    }
  }

1-2 Vue3+Vite项目配置跨域

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

server: {
            port: 3005, // 项目端口
            host: "localhost",
            proxy: {
                "/smartReport": { // 接口前缀
                    target: "接口服务器地址：ip+端口",
                    // 允许跨域
                    changeOrigin: true
                    // 路径重写：在发出请求后将 接口前缀 替换为''空值，这样不影响接口请求
                    // pathRewrite: { 
                    //   '^/smartReport': ''
                    // }
                }
            }
        }

2、Vue项目打包：

npm run build

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

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

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

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

以我的举例：

也可以使用 Xftp 向服务器传输文件，Mac用户推荐Termius

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;#错误页面
	}

配置完 nginx.conf 后保存，执行

# 测试 Nginx 配置以确保没有语法错误
nginx -t

如果没有错误，重新加载Nginx以使更改生效

systemctl reload nginx

4、也可以直接重启nginx

systemctl restart nginx

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

在服务器中打开 dist 所在的文件夹的最上级文件夹（一般是根目录），如：我的 dist 文件夹的绝对路径为 /root/front_end/dist ，那么就打开：

cd /

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

chmod -R 777 /root/

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

在浏览器输入：

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

即可进行访问

Step6：域名配置

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

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