前后端分离项目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

前后端分离项目Nginx部署相关推荐

在Docker 上完成对Springboot+Mysql+Redis的前后端分离项目的部署（全流程，全截图）
本文章全部阅读大约2小时,包含一个完整的springboot + vue +mysql+redis前后端分离项目的部署在docker上的全流程,比较复杂,请做好心理准备,遇到问题可留言或则私信目录 ...
最细致的Spring Boot结合Vue前后端分离项目打包部署步骤（搭配Nginx）
文章目录前言一.环境准备二.SpringBoot项目打jar包 1.1 使用Maven的package插件打包 1.2 上传至Linux服务器三.Vue项目打包 1.1 修改后台请求地址 1. ...
前后端分离项目如何部署_前后端分离项目，如何解决跨域问题？
跨域资源共享(CORS)是前后端分离项目很常见的问题,本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题. 01 什么是跨域问题? CORS全称Cross-Ori ...
前后端分离项目nginx搭建静态页面服务器cors做后台跨域接收前台请求
自己在闲暇时间里,无聊的我试着做了一个前后台分离的入门demo.在编写代码前通过查询百度,csdn,博学谷等做了一些准备工作,具体还只是做到前台发送的请求能顺利的发送到后端,时间仓促做的也有不足之处, ...
打包微服务前后端分离项目并部署到服务器 --- 分布式 Spring Cloud + 页面渲染 Nuxt.js
前言 Spring Cloud项目属于微服务项目,也就是含有多个Sping Boot模块集合而成的项目 Nuxt.js项目属于前端基于Vue的服务端渲染项目最近在服务器部署上线了一个基于Spring ...
Django+Vue前后端分离项目的部署
部署静态文件: 静态文件有两种方式 1:通过django路由访问 2:通过nginx直接访问方式1: 需要在根目录的URL文件中增加 url(r'^$', TemplateView.as_view( ...
(五)Debian Linux中部署Spring Boot + Vue的前后端分离项目详细过程(arm64/aarch64架构下)
专题系列往期文章目录 (一)移动端安卓手机改造成linux服务器&Linux中安装软件踩坑历险记 (二)Debian Linux系统中安装oracle JDK1.8详细过程(arm64/aar ...
RuoYi-Vue 部署 Linux环境若依前后端分离项目（jar包+nginx 多机版本）
接上一篇:RuoYi-Vue 部署 Linux环境若依前后端分离项目(jar包+nginx 单机版本) 前端和后端不在一个服务器上,如何部署呢? 文章目录 1. 服务器和软件部署 2. 后端部署 3 ...
RuoYi-Vue 部署 Linux环境若依前后端分离项目（jar包+nginx 单机版本）
文章目录一.软件安装部署 1. 安装jdk 2. mysql8安装部署 3. redis安装 4. nginx 安装部署 5. 克隆项目二.后端项目 2.1. 修改数据库连接 2.2. 修改Red ...

前后端分离项目Nginx部署

前后端分离项目Nginx部署

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

一、在Linux先安装好Java和Nginx

1.安装Java

2.安装Nginx

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

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

1、启动springboot后端项目

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

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

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

三、Nginx的nginx.conf配置

前后端分离项目Nginx部署相关推荐

最新文章

热门文章