项目部署教程

最新推荐文章于 2024-08-25 09:23:47 发布
最新推荐文章于 2024-08-25 09:23:47 发布
阅读量344 收藏
点赞数
文章标签： docker 容器 linux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59448100/article/details/127843918
版权

1.打包后端项目jar包

打开pom.xml文件，修改packaging方式为jar

QQ截图20210813231637 1.png

点击右侧maven插件 -> package

QQ截图20210813231652 1.png

打包成功后会在target目录下生成jar包

QQ截图20210813231721 1.png

2.编写Dockerfile文件

FROM java:8
VOLUME /tmp
ADD blog-springboot-0.0.1.jar blog.jar       
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/blog.jar"] 
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

ps：Dockerfile文件不需要后缀，直接为文件格式

3.编写blog-start.sh脚本

#源jar路径  
SOURCE_PATH=/usr/local/docker
#docker 镜像/容器名字或者jar名字 这里都命名为这个
SERVER_NAME=blog-springboot-0.0.1.jar
TAG=latest
SERVER_PORT=8080
#容器id
CID=$(docker ps | grep "$SERVER_NAME" | awk '{print $1}')
#镜像id
IID=$(docker images | grep "$SERVER_NAME:$TAG" | awk '{print $3}')
if [ -n "$CID" ]; then
  echo "存在容器$SERVER_NAME, CID-$CID"
  docker stop $CID
  docker rm $CID
fi
# 构建docker镜像
if [ -n "$IID" ]; then
  echo "存在$SERVER_NAME:$TAG镜像，IID=$IID"
  docker rmi $IID
else
  echo "不存在$SERVER_NAME:$TAG镜像，开始构建镜像"
  cd $SOURCE_PATH
  docker build -t $SERVER_NAME:$TAG .
fi
# 运行docker容器
docker run --name $SERVER_NAME -v /usr/local/upload:/usr/local/upload -d -p $SERVER_PORT:$SERVER_PORT $SERVER_NAME:$TAG
echo "$SERVER_NAME容器创建完成"

ps：sh文件需要用notepad++转为Unix格式

QQ截图20210402213326.png

4.将文件传输到服务器

QQ截图20210916104127.png

将上述三个文件传输到/usr/local/docker下（手动创建文件夹）

QQ截图20210402212725.png

5.docker运行后端项目

进入服务器/usr/local/docker下，构建后端镜像

sh ./blog-start.sh

QQ截图20210402213552.png

ps：第一次时间可能比较长，耐心等待即可

查看是否构建成功

QQ截图20210402214341.png

可以去测试下接口是否运行成功

QQ截图20200706094027.png

ps：需要重新部署只需重新传jar包，执行sh脚本即可

6.打包前端项目

打开cmd，进入Vue项目路径 -> npm run build

QQ截图20200706091427.png

打包成功后会在目录下生成dist文件

QQ截图20200706091817.png

将Vue打包项目传输到/usr/local/vue下（由于我前台和后台分为两个项目，所以改名dist文件）

QQ截图20200706092538.png

7.nginx配置(有域名选这个)

参考域名解析

QQ截图20220114151133.png

在/usr/local/nginx下创建nginx.conf文件，格式如下

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    client_max_body_size     50m;
    client_body_buffer_size  10m; 
    client_header_timeout    1m;
    client_body_timeout      1m;

    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_comp_level  4;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;

server {
        listen       80;
        server_name  前台域名;
     
        location / {		
            root   /usr/local/vue/blog;
            index  index.html index.htm; 
            try_files $uri $uri/ /index.html;	
        }
			
	location ^~ /api/ {		
            proxy_pass http://你的ip:8080/;
	    proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;						
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
		
    }
	
server {
        listen       80;
        server_name  后台子域名;
     
        location / {		
            root   /usr/local/vue/admin;
            index  index.html index.htm; 
            try_files $uri $uri/ /index.html;	
        }
			
	location ^~ /api/ {		
            proxy_pass http://你的ip:8080/;
	    proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;						
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
		
    }

server {
        listen       80;
        server_name  websocket子域名;
     
        location / {
          proxy_pass http://你的ip:8080/websocket;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "Upgrade";
          proxy_set_header Host $host:$server_port;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
       }
	
    }

server {
        listen       80;
        server_name  上传文件子域名;
     
        location / {		
          root /usr/local/upload/; 
        }		
		
    }
 
 }

ps：我前台和后台时分为两个域名，所以写了两个server，前端项目路径为之前传输的路径，其他两个为文件上传域名和websocket转发域名。

docker启动nginx服务

docker run --name nginx --restart=always -p 80:80 -d -v /usr/local/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/vue:/usr/local/vue -v /usr/local/upload:/usr/local/upload nginx

8.nginx配置(无域名选这个)

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    client_max_body_size     50m;
    client_body_buffer_size  10m; 
    client_header_timeout    1m;
    client_body_timeout      1m;

    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_comp_level  4;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;

server {
        listen       80;
        server_name  你的ip;
     
        location / {		
            root   /usr/local/vue/blog;
            index  index.html index.htm; 
            try_files $uri $uri/ /index.html;	
        }
			
	location ^~ /api/ {		
            proxy_pass http://你的ip:8080/;
	    proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;						
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
		
    }
	
server {
        listen       81;
        server_name  你的ip;
     
        location / {		
            root   /usr/local/vue/admin;
            index  index.html index.htm; 
            try_files $uri $uri/ /index.html;	
        }
			
	location ^~ /api/ {		
            proxy_pass http://你的ip:8080/;
	    proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;						
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
		
    }

server {
        listen       82;
        server_name  你的ip;
     
        location / {
          proxy_pass http://你的ip:8080/websocket;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "Upgrade";
          proxy_set_header Host $host:$server_port;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
       }
	
    }

server {
        listen       83;
        server_name  你的ip;
     
        location / {		
          root /usr/local/upload/; 
        }		
		
    }
 
 }

docker启动nginx服务

docker run --name nginx --restart=always -p 80:80 -p 81:81 -p 82:82 -p 83:83 -d -v /usr/local/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/vue:/usr/local/vue -v /usr/local/upload:/usr/local/upload nginx

ps：需要通过ip + 端口号访问项目

9.运行测试

去浏览器测试下是否运行成功

QQ截图20200706094824.png

10.其他设置

进入后台管理 -> 系统管理 -> 网站管理 -> 其他设置，配置websocket地址，有域名则填ws://websocket域名，无域名则填ws://ip:82

QQ截图20210910204242.png

11.总结

整个前后端分离的部署教程到这里就结束啦，第一次部署可能会比较麻烦，不过后面就轻车熟路了，有问题的可以私聊问我或者在评论区留言。

摆烂小狗
关注
专栏目录
springboot项目部署教程讲解
04-14
SpringBoot 是由Pivotal团队提供的全新框架，其设计目的是用来简化Spring 应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。
vue+springboot前后端分离项目整合部署流程
haohulala的博客
05-30 5184
我们在进行前后端分离开发的时候，一般是将前端项目部署到nginx服务器上，与后端项目分开部署，但是如果是个人开发的小型项目，不需要这么麻烦，直接将前后端项目放到一起部署即可。本文就来介绍一下前后端项目一起部署的流程。
前后端分离项目部署(SpringBoot + Vue)
weixin_51422386的博客
11-22 5630
随着互联网时代的更新迭代，传统的开发模式也随之改变。近几年来，或许我们计算机学生听得最多的就是前后端分离项目。SpringBoot+Vue就是一种典型的前后端分离开发模式。前后端分离已经成为互联网项目开发的业界标准使用方式，通过Nginx+Tomcat的方式（也可以中间加一个Node.js）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。
项目部署：从手动到自动化的艺术
最新发布
xycxycooo的博客
08-25 604
通过本文的讲解，你已经全面了解了项目部署的两种方式：手动部署和基于Shell脚本的自动化部署。掌握这些部署方法将帮助你在不同的项目中高效地进行部署，提升开发和运维的效率。无论是小型项目、中型项目还是大型项目，选择合适的部署方式都是确保项目稳定和高效运行的关键。希望本文的内容能为你提供有价值的参考，并在实际工作中发挥作用。
基于springboot+vue的前后端分离后项目部署方案
CSDN_KONGlX的博客
07-06 2971
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(51, 51, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
springboot+vue 前后端分离项目怎么启动,怎么部署？vue项目windows linux部署 域名访问教程合集
热门推荐
孟秋与你的博客
07-25 2万+
注：导入项目教程 0基础适用 1.node,js是什么？ 如果说相当于java中的jdk 那就很清晰了，使js脱离浏览器 可以运行的环境，下载地址：https://nodejs.org/en/download/ 安装时默认会选择配置环境变量，或自己手动配置，安装完成后，cmd命令检验是否成功 注意是双横杆 2.idea 导入springboot+vue项目 springboot部署： maven路径修改 改成自己的对应路径！ （需网上 下载maven 注意maven需要配置环境变量） 打开项目之后
Spring Boot+vue前后端分离项目部署
qq_42718098的博客
04-25 5083
Spring Boot+vue前后端分离项目部署
linux部署项目教程 API
09-10
在Linux环境下部署项目并发布API是一项涉及多个步骤的复杂工作，通常包括环境准备、软件安装、配置、项目部署以及安全性设置等多个方面。以下从文件内容中提取的知识点，将详细介绍如何在Linux系统中部署项目，以及...
weblogic之web项目部署教程
11-21
经过多次测试发现，将Web应用以War包的形式部署到WebLogic服务器时总是不成功，而将war包解压之后以文件夹的形式部署时就可以成功，具体的原因不知道未知，希望有这方面经验的园友们能够指导一下。下面就来讲一下...
Docker部署若依项目教程
11-30
Docker部署若依项目教程。
【原生部署】SpringBoot+Vue前后端分离项目
观止study
01-10 6334
SpringBoot+Vue前后端完全分离项目在linux服务器上环境的搭建与部署，包含JAVA、MySQL、Redis、Nginx、Node.js、Git、Maven的搭建
【Linux服务器】SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程（原始部署/宝塔部署）
记录一名在读研究生的学习笔记、感悟、开发产物
04-25 1万+
该文档提供了Vue.js前端项目与Java后端项目的打包和部署指南。前端部分介绍了如何通过修改配置文件来进行生产环境构建，并使用Nginx或宝塔面板进行部署。后端部分详细说明了如何调整Maven配置以优化打包过程，以及如何通过命令行或宝塔面板部署Spring Boot应用。文档还包含了示例代码和步骤截图，便于开发者理解和操作。
Springboot+Vue前后端分离项目的部署
qq_57585993的博客
02-26 4162
本项目是我在假期时候在b站学习的，后来对后端进行了改造。使用的是springboot+mongodb+vue+echarts，最后将项目部署到云端。以后有时间的话可能会发一下开发的详细教程。
Spring Boot + Vue 前后端分离项目的部署
qq_45716120的博客
02-07 4226
把 spring boot 的 jar 包上传至服务器任意目录，然后通过 后台运行 Jar 命令运行程序 注意修改端口，以及阿里云、宝塔的放行 服务器查看进程 ps -ef | grep java 后台运行 jar nohup java -jar shareniu.jar >log.txt & 根据端口杀死进程 sudo fuser -k -n tcp 8080 ...
springboot+vue前后端分离项目的服务器部署
m0_52457734的博客
09-23 3177
将springboot+vue前后端分离项目部署到服务器上，实现直接通过公网ip访问项目。
【运维】Vue+SpringBoot前后端分离项目部署
m0_64210833的博客
09-14 3454
Vue+SpringBoot前后端分离项目部署（详细步骤）
Spring Boot+Vue前后端分离项目如何部署到服务器
interest_ing_的博客
03-13 2730
部署Spring Boot+Vue前后端分离项目到服务器涉及以下步骤：首先，将Spring Boot后端应用打包成jar或war文件并上传至服务器，通过运行`java -jar`命令启动后端服务。接着，构建Vue前端项目生成静态文件，同样上传至服务器的Web服务器目录，如Nginx的`html`目录。最后，配置Nginx作为反向代理，将前端请求代理至Vue应用目录，同时确保后端API的路径正确映射。这样，前后端分离的项目就成功部署在服务器上。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署
DaenCode的博客
08-04 5023
日常开发项目上线或者部署个人博客网站，都离不开线上服务器部署应用。本文带你学会线上部署应用。以腾讯云轻量应用服务器部署SpringBoot、Vue项目为例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值