前后端分离项目Nginx部署

前后端分离项目Nginx部署

更多详细内容请前往我的个人博客

一、在Linux先安装好Java和Nginx

1.安装Java

下载好Java安装包，解压

[root@jiang java]# ll
total 187328
drwxr-xr-x 7   10  143      4096 Dec 16  2018 jdk1.8.0_201
-rw-r--r-- 1 root root 191817140 Dec 19  2018 jdk-8u201-linux-x64.tar.gz
[root@jiang java]# tar -zxvf jdk-8u201-linux-x64.tar.gz

配置环境变量

vim /etc/profile 在尾处添加

export JAVA_HOME=/opt/software/java/jdk1.8.0_201
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH

使环境变量生效 source /etc/profile

检查版本

[root@jiang java]# java -version
java version "1.8.0_201"
Java(TM) SE Runtime Environment (build 1.8.0_201-b09)
Java HotSpot(TM) 64-Bit Server VM (build 25.201-b09, mixed mode)
[root@jiang java]#

2.安装Nginx

进入nginx官网下载页面，下载Linux所需的压缩包文件。

nginx-1.20.1.tar.gz

在安装nginx之前需要安装pcre,gcc,openssl,zlib。因为nginx依赖这些环境。

yum install pcre pcre-devel gcc openssl openssl-devel zlib zlib-devel

上传nginx压缩包到linux，解压。

tar -zxvf nginx-1.20.1.tar.gz

进入解压缩目录，执行./configure。

cd nginx-1.20.1/

./configure

执行make

make

执行make install

make install

nginx已完成安装，默认安装目录为 /usr/local/nginx

进入安装位置的sbin目录，使用./nginx启动nginx

cd /usr/local/nginx/sbin

./nginx

用浏览器访问安装nginx所在机器的ip地址可以看到nginx欢迎页面，表示安装成功。

二、启动springboot后端项目和配置vue前后台两个前端项目

1、启动springboot后端项目

springboot后端项目打成jar包，上传到Linux。

nohup java -jar xxx.jar  > /opt/software/blog/data/logs/logs_out.log  2>&1 & 

2、vue前后台两个前端项目配置打包与部署

前台项目配置vue.config.js

module.exports = {
    transpileDependencies: ["vuetify"],
    publicPath:'/blog',		// 配置公共路径，方便Nginx代理
    devServer: {
        port: 9090,
        proxy: {
            "/api": {
                target: "http://localhost:8081",	// 访问后台地址
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        },
        disableHostCheck: true
    },
    productionSourceMap: false,
    css: {
        extract: true,
        sourceMap: false
    }
};

router下的index.js文件配置(部分)

....
const router = new VueRouter({
  mode: "history",
  // base: process.env.BASE_URL,
  base:"/blog",	// 配置公共路径，方便Nginx代理
  routes
});

export default router;

打包后，将dist文件放到Nginx的/html/front/目录下（没有front目录就创建）

后台项目配置vue.config.js

module.exports = {
    publicPath:'/admin',	// 配置公共路径，方便Nginx代理
    productionSourceMap: false,
    devServer: {
        port: 9000,
        proxy: {
            "/api": {
                target: "http://127.0.0.1:8081",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        },
        disableHostCheck: true
    },
    chainWebpack: config => {
        config.resolve.alias.set("@", resolve("src"));
    }
};

router下的index.js文件配置(部分)

const createRouter = () =>
  new VueRouter({
    mode: "history",
    base:"/admin",	// 配置公共路径，方便Nginx代理
    routes: routes
  });

打包后，将dist文件放到Nginx的/html/admin/目录下（没有admin目录就创建）

三、Nginx的nginx.conf配置

server {
        listen       9000;	# 监听9000端口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /blog {	# 带/blog的路由跳转到前台
            alias   /usr/local/nginx/html/front/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /admin {	# 带/admin的路由跳转到后台
            alias  /usr/local/nginx/html/admin/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        
		error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #	后台获取数据接口，带api的，截取掉后再进行请求
        location ~* ^/(api) {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass   http://127.0.0.1:8081;
        }
}

重启Nginx

[root@jiang nginx]# ./sbin/nginx -s reload