在linux服上部署vue+springboot+nginx项目

本文详细介绍了在Linux环境下进行Java、MySQL等技术的安装,包括winscp、jdk、mysql和nginx的配置,前端与后端项目的打包与部署,以及如何配置外网访问和查看日志解决常见问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、环境准备

1、安装winscp便于可视化操作linux:winscp安装及关联putty使用_putty.exe没有找到_cherishSpring的博客-优快云博客

2、安装jdk:linux系统安装jdk-优快云博客

3、安装mysql:Linux7安装mysql数据库以及navicat远程连接mysql-优快云博客

4、安装nginx: 阿里云服务linux系统CentOs8.5安装/卸载nginx1.15.9-优快云博客

 二、打包项目

1、前端打包前需加如api一样的前缀,便于后面nginx处理跨域

然后选中前端工程右键->open in->terminal打开命令窗口,执行打包命令,生成dist目录

打包命令要根据pakage.json里定义的来,以下定义的是build,可执行npm run build,

若安装了yarn,也可执行yarn build

2、后端打bootjar包,打好之后通常可以在工程build/lib目录下找到:

     

3、将前端生成的dist目录内容和后端打好的jar包上传到linux服,目录随意,我这里是放在app用户的主目录下的

4.启动后端,打开winscp命令行工具,进入后端jar放置的目录,执行java -jar xxx.jar

三、配置外网访问

1、配置nginx,若没有域名,就配置服务外网ip

2、nginx配置在修改后需要重启

cd /usr/local/nginx/sbin/
./nginx -s reload

3、需要再阿里云服务放行端口

 

4、放行后即可在浏览器输入地址访问

若是80端口:

     http://www.xxx.com

     http://8.xx.xx.169

若是其他端口,如8090:

     http://www.xxx.com:8090

     http://8.xx.xx.169:8090

因为80为http访问默认端口,所以访问的时候不需要加上,但其他端口就必须要加才能访问

  若不想加端口,可以参考:阿里云域名解析到非默认端口处理方式-优快云博客

5、查看nginx日志位置 ,若访问不了可以查看日志处理

### 使用 Docker 部署 VueSpring Boot 组成的前后端分离项目 #### 准备工作环境 为了成功部署基于VueSpring Boot的应用程序,需准备如下软件环境: - **操作系统**:CentOS 7.9 或其他兼容Linux发行版。 - **Docker 版本**:18.09.4 及以上版本[^2]。 - **Docker Compose 安装**:通过命令 `sudo curl -L https://get.daocloud.io/docker/compose/releases/download/1.25.1/docker-compose-\`uname -s\`-\`uname -m\` -o /usr/local/bin/docker-compose` 来安装docker-compose工具[^4]。 #### 打包前端与后端应用 对于前端Vue部分,在构建阶段会生成一个名为`dist`的新文件夹于项目根目录下。此过程通常由npm脚本执行,如`npm run build`。完成后可将该文件夹内的静态资源压缩为ZIP格式以便后续处理[^1]。 针对后端Spring Boot组件,则应确保其被打包成标准的jar/war形式,并放置在一个易于访问的位置供Docker镜像使用。 #### 编写 Dockerfile 文件 编写两个独立的Dockerfile用于定义各自务的基础映像及其配置参数。以下是简化后的例子: ##### 后端 (Spring Boot) 的 Dockerfile 示例: ```dockerfile FROM openjdk:8-jdk-alpine VOLUME /tmp ARG JAR_FILE=target/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"] ``` ##### 前端 (Vue.js) 的 Dockerfile 示例: ```dockerfile FROM node:lts-alpine as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:alpine COPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` #### 创建 docker-compose.yml 文件 利用docker-compose可以更方便地管理多个关联的务实例。下面是一个简单的组合示例,它包含了Nginx作为反向代理来分发请求给对应的微务节点。 ```yaml version: '3' services: backend: image: springboot-app-image-name ports: - "8080:8080" environment: SPRING_DATASOURCE_URL: jdbc:mysql://db:3306/dbname?useSSL=false&serverTimezone=UTC depends_on: - db frontend: image: vue-app-image-name ports: - "80:80" db: image: mysql:5.7 volumes: - db_data:/var/lib/mysql environment: MYSQL_ROOT_PASSWORD: examplepassword MYSQL_DATABASE: dbname volumes: db_data: ``` 上述设置中,`backend`, `frontend`以及`db`代表三个不同的容器化应用程序;其中数据库容器被赋予了一个持久卷以保存数据防止丢失[^3]。 #### 构建并启动务 进入包含有`docker-compose.yml`文件的工作空间,依次运行以下指令完成整个系统的初始化操作: ```bash cd path/to/project/root docker-compose down # 如果之前存在旧版本则先停止它们 docker-compose up -d # 开始新建或更新现有务到最新状态 ``` 这样就可以实现一次性的自动化部署流程了。每次当业务逻辑有所变动时只需重复最后两步动作即可快速迭代上线新特性或者修正错误。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值