Spring+Vue工程部署在Linux

た入场券 2023-09-28 21:51 120阅读 0赞

[原文链接][Link 1]

## 代码介绍 ##

前端代码：https://github.com/Snowstorm0/token-login-vue

后端代码：https://github.com/Snowstorm0/token-login-spring

使用 Spring+Vue 实现 token 登录、退出、访问拦截等功能。

## 1 部署后端 ##

### 1.1 生成 jar 包 ###

使用 Idea 的 maven 进行打包。

先双击 clean，清除其他的包，然后双击 package，如下图所示：

![8b0431d0beec92f9a477a0768bdf318a.png][]

此时在工程下生成了 target 文件夹，里面有我们的 jar 包：

![d98410f915ed70336a9fd66cb378e7c9.png][]

### 1.2 部署到服务器 ###

将 jar 包 `token-login-spring-1.0-SNAPSHOT.jar`上传到服务器，运行启动命令：

java -jar token-login-spring-1.0-SNAPSHOT.jar

即可启动后端工程。

## 2 部署前端 ##

### 2.1 打包 ###

运行打包命令：

npm run build

此时会在项目下生成 dist 文件夹。我们将该文件夹压缩，上传服务器，并解压。

### 2.2 安装 Nginx ###

Ubuntu 下的安装命令：

sudo apt-get install nginx

查看安装路径：

whereis nginx

显示：

nginx:
     /usr/sbin/nginx    #主程序
     /usr/lib/nginx #软件的函数库
     /etc/nginx  #存放配置文件
     /usr/share/nginx  #存放静态文件
     /usr/share/man/man8/nginx.8.gz  #联机帮助文件

安装成功。

### 2.3 配置 Nginx ###

找到文件`/etc/nginx/sites-available/default`，修改为可编辑权限：

sudo  chmod 777 /etc/nginx/sites-available/default

找到`root /var/www/html;` 这一行，修改为解压的 dist 文件夹的路径，如：

> root /home/myroot/Desktop/token-login/dist;

重启nginx：

sudo nginx -s reload

在浏览器输入：http://localhost/\#/login，即可看到前端页面。

**学习更多编程知识，请关注我的公众号：**

[代码的路][Link 2]

![621c4b1f8a7aaabaed70033743c5f4d9.png][]

[Link 1]: https://mp.weixin.qq.com/s/H1xNyf17wyrWZKDHV_ssiA
[8b0431d0beec92f9a477a0768bdf318a.png]: https://img-blog.csdnimg.cn/img_convert/8b0431d0beec92f9a477a0768bdf318a.png
[d98410f915ed70336a9fd66cb378e7c9.png]: https://img-blog.csdnimg.cn/img_convert/d98410f915ed70336a9fd66cb378e7c9.png
[Link 2]: https://mp.weixin.qq.com/s/t0t89DFgJ1TEzI4uI5giHg
[621c4b1f8a7aaabaed70033743c5f4d9.png]: https://img-blog.csdnimg.cn/img_convert/621c4b1f8a7aaabaed70033743c5f4d9.png