索引

  • 1. 阿里聚石塔控制台
  • 2. 后端项目打包部署
    • 2.1 mvn package 打 war 包
    • 2.2 创建服务 Tomcat
    • 2.3 上传部署
  • 3. 前端项目打包部署
    • 3.1 yarn build 打包
    • 3.2 创建服务 Nginx
    • 3.3 上传资源包
  • 4. 访问项目

1. 阿里聚石塔控制台

登录聚石塔账号,进入 控制台>开发运维>服务列表,在服务列表可以查看已创建部署的服务;聚石塔提供一整套完整的运维部署解决方案,列表服务支持停止开启服务,上传部署,编译部署,支持历史版本部署,监控,SSH等。



    这里是前后端分离项目,Vue.js 前端项目 + SpringBoot 后端项目,后端项目Maven 管理打 WAR 包,前端项目 Yarn 管理。

2. 后端项目打包部署

2.1 mvn package 打 war 包

2.2 创建服务 Tomcat

选择镜像-服务配置-环境变量-确认创建

  • 选择镜像

此处 SpringBoot 项目打 WAR 包部署在 Tomcat,根据实际项目选择版本,此处选择 Tomcat8.5.38

  • 服务配置

自定义服务标题名称;
    绑定已创建应用及 appKey;
    选择容器规格,支持自定义规格;
    选择要部署在的云服务器,服务器实际部署容器数量设置为 1 个;

  • 环境配置

网络配置设置服务访问域名;这里仅配置了域名,后端项目提供域名,前端项目配置访问后端项目接口的域名为该域名后打包

  • 确认创建

勾选立即启动,创建服务完成

2.3 上传部署

创建服务后,在服务列表可以找到该服务;当服务较多时可以创建分组标签,对服务进行编辑分组。
    找到服务,选择上传部署;
    选择本地上传部署,逐个容器部署,可以添加备注,点击上传程序包,增加文件,选择打好的 war 包,等待上传进度为 100% 即可,容器会自动重启。
    有时候点击增加文件后,进度条很长时间不会变动,文件添加到上传队列,队列也没权限查看,也不确定是不是阻塞,我也是看不懂,难顶。


    一般的,项目 war 包没问题的话到此,后端项目部署完成。容器启动后运行中服务有异常,应该是war 包有问题或者容器环境和 war 包要求环境不匹配。你可以在服务列表点击容器管理,在操作项选择 WebSSH 进入 SSH 查看 /acs/log 下的日志排查问题。


    服务启动后,通过配置的服务域名可以访问后端项目的接口,接口访问能有响应部署就完成了。

3. 前端项目打包部署

3.1 yarn build 打包

前端项目配置好正式环境后端项目的域名,通过build 命令打资源包

3.2 创建服务 Nginx

选择镜像-服务配置-环境变量-确认创建

  • 选择镜像

选择其他>Nginx 1.14.2
    服务版本根据实际项目自主选择。

  • 服务配置

自定义服务标题名称;
    绑定已创建应用及 appKey;
    选择容器规格,支持自定义规格;
    选择要部署在的云服务器,服务器实际部署容器数量设置为 1 个;

  • 环境变量

网络配置支持选择通信协议,自定义域名等
    环境配置支持配置默认 nginx.conf 文件,因此处前端打包文件为dist文件夹,此处我配置资源根路径地址为 /acs/dist

        location / {root   /acs/code;index  index.html index.htm;}

        location / {root   /acs/dist;index  index.html index.htm;}

其他无改动。

  • 确认创建

确认基础信息后,可以勾选立即启动服务,点击创建完成服务创建。

3.3 上传资源包

前端项目为静态文件资源,打包资源放到 nginx 服务映射对应路径下即可。
    进入 WebSSH ,将 /acs/upload 下的 dist.zip 移动到/acs 解压后,根据 Nginx 服务配置地址 /acs/dist 无误,重启服务即可。


    服务启动后访问配置的域名,能访问到 /acs/dist/index.html 资源,部署就完成了。

4. 访问项目

服务启动后访问前端项目(前端项目外网域名)即可。

基于聚石塔2.0梳理,仅作参考,现聚石塔版本为3.0
Power By niaonao

阿里聚石塔2.0部署前后端分离项目相关推荐

  1. linux --- 部署前后端分离项目

    vue + uwsgi +nginx 部署前后端分离项目 准备项目 1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中 2.解压缩操作 前端 ...

  2. 使用 Nginx 部署前后端分离项目,解决跨域问题

    前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...

  3. Docker部署前后端分离项目

    云主机 centos7 中Docker容器式部署前后端分离项目Django+Vue.js 前期准备: Docker安装Docker - CentOS Docker 软件包和依赖包已经包含在默认的 Ce ...

  4. (一)专题介绍:移动端安卓手机改造成linux服务器linux服务器中安装软件、部署前后端分离项目实战

    快捷目录 前言 一.涉及到的相关技术简介 二.具体实现过程及踩坑杂谈 1.安卓手机改造成linux系统实现方案 2.改造后的手机Linux中软件的安装 3.手机Linux中安装MySQL5.7踩坑实录 ...

  5. tomcat vue 不用 前后端_部署前后端分离项目(后端 tomcat 前端 nginx)

    关键词 spring-boot gradle 腾讯云 tomcat nginx vue 前后端分离 代理 前言 因为种种原因,把后端部署在 tomcat,前端项目部署在 nginx. Tomcat t ...

  6. weblogic部署前后端分离项目

    环境说明 序号 服务名称 版本信息 1 weblogic weblogic 12.2.1.3.0 2 jdk jdk-1.8.0_111 环境准备 (1)jdk安装(已安装请忽略) 将发布包下的ins ...

  7. k8s部署前后端分离项目

    文章目录 1. 项目准备 1.1 后端项目 1.1.1 数据库表 1.1.2 SpringBoot项目 1.2 前端项目 1.2.1 页面 1.2.2 nginx代理 1.2.3 页面效果 2. Do ...

  8. 基于docker部署前后端分离项目--->docker+Dockerfile+vue+nginx+uwsgi+django+socket+负载均衡

    1. 介绍 本文基于阿里云服务器,安装的ubuntu20.04系统 适用于conten7.5系列 适用于ubuntu16.04以上系列 vue已经打包完成,所以不能使用我的vue项目 2. 部署 部署 ...

  9. Windows 平台部署前后端分离项目

    背景 因为公司业务主要与工业相关,工业使用的多数为Windows电脑,此时就需要将公司的系统部署在Windows平台上,这里使用Django来作为后端. 一.数据库部署 1.1 本地环境准备 在后端部 ...

  10. tomcat部署前后端分离项目404问题

    最近在部署项目时,访问出现了404,特此记录一下 1.tomcat解压,最好不要放在C盘 2.将VUE开发的前端项目放在webapp目录下,目的是tomcat启动后可以访问网站 3.部署后端war包 ...

最新文章

  1. 部署Oracle数据库
  2. Gps高程拟合matlab代码,几种GPS高程拟合方法分析与比较.doc
  3. java.security_Java开发网 - java.security.NoSuchAlgorithmException 问题的一些解决
  4. 白话Elasticsearch49-深入聚合数据分析之 Percentile Ranks Aggregation-percentiles rank以及网站访问时延SLA统计
  5. c语言程序开发中连接是,C语言中等待socket连接和对socket定位的方法
  6. g标签 怎么设置svg_SVG(可缩放矢量图形)图片添加、高斯模糊、渐变与g标签
  7. [c、c++]宏中#和##的用法(zz)
  8. 结对编程,到底是双剑合璧还是脚趾抠地?
  9. 【FLink】Flink 消费 kafka 消费组 死掉 Marking the coordinator dead for group 造成数据重复消费
  10. 令人纠结的表单设计:水平选项 Or 垂直选项?
  11. 使用Microsoft Word中“多级列表”功能定制文档标题的方法
  12. 数据结构与算法(C语言版)——陈越
  13. c语言输出最大的数ns流程图_怎么将100至200中全部的素数用NS流程 – 手机爱问...
  14. 学习《第一行代码Android》(郭霖著)过程中遇到的问题及解惑总结
  15. VFP6.0运行exe文件后显示:程序错误 “不能存取文件”
  16. java try catch 输入字符串_java – 没有在try / catch中捕获NumberFormatException
  17. 欺骗的艺术——第二部分(7)
  18. 2021常见user_agent大全 用户浏览器ua(互联网项目自己整理)
  19. windows设置路由信息
  20. IC卡、ID卡、M1卡、射频卡的区别是什么(射频卡是种通信技术)

热门文章

  1. yolov5系列-yolov5模型部署到web端
  2. (专升本)PowerPoint(设置幻灯片的动画效果)
  3. android 对焦,Android相机对焦模式
  4. PPT课件实现连连看游戏——简单好用
  5. 理财入门:企业分析(简述)
  6. 【Python打印图形问题】利用print打印一些规则的图形(通过特殊符号比如*和空格组成)
  7. Grub4Dos 学习笔记
  8. 一分钟快速理解:模拟信号和数字信号!
  9. Windows下定时运行程序
  10. 英语读音(二) / English Pronounciation