前后端分离项目Nginx部署
更多详细内容请前往我的个人博客
一、在Linux先安装好Java和Nginx
1.安装Java
下载好Java安装包，解压
[root@jiang java]# lltotal 187328drwxr-xr-x 7 10 1434096 Dec 16 jdk1.8.0_201-rw-r--r-- 1 root root 191817140 Dec 19 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_201export JRE_HOME=${JAVA_HOME}/jreexport CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/libexport PATH=${JAVA_HOME}/bin:$PATH
使环境变量生效 source /etc/profile
检查版本
[root@jiang java]# java -versionjava 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
