[问题探讨]基于VUE+docker+nginx+IntelliJ IDEA+Alibaba Cloud Toolkit实现WEB项目一键部署

最新推荐文章于 2023-04-13 14:19:19 发布
最新推荐文章于 2023-04-13 14:19:19 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： WEB项目全局性功能集合 问题探讨 文章标签： web服务部署 Alibaba Cloud Toolkit 一键部署 nginx docker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tom_wong666/article/details/102936936
版权

需求：基于VUE+docker+nginx+IntelliJ IDEA+Alibaba Cloud Toolkit实现WEB项目一键部署

分析：如下图

Alibaba Cloud Toolkit其实是按步骤做了手动部署需要做的三件事情：

1，npm run build打生产包
2，通过ftp服务将生产包放入配置好的nginx服务目录中
3，启动.sh脚本完成部署

首先，我们来实现一次手动部署

一，dist包部分

1，准备VUE源码，如果没有适合练手源码的小伙伴，可以从如下github项目上克隆
tom-wong666/xiaoa
2，npm install 安装依赖
3，npm run build 打包dist

二，ftp服务部分

1，下载安装MobaXterm，奉上链接

最低0.47元/天 解锁文章
tom_wong666
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
[手把手系列之]Docker 部署 vue 项目
weixin_45556713的博客
09-25 1264
Docker 部署 vue 项目 1.写在前面： Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。 Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖...
Django+Vue+Docker企业OA系统
最新发布
06-03
视频课程下载——Django+Vue+Docker企业OA系统
Docker镜像+nginx 部署 vue 项目的方法
01-09
一、打包vue项目 　　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。 　　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。 二、获取nginx 镜像 　　nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。 　　在终端输入： docker pull nginx 　　即可以获取到nginx镜像。 　　Docker镜像是一个特殊的文件系统，除了提供容器运行时
IDEA下一键部署Vue项目到Linux服务器(Alibaba Cloud Toolkit的使用)
u010679782的博客
01-08 1303
写在开始:一个搬砖程序员的随缘记录 简介: Cloud Toolkit 是本地 IDE 插件，帮助开发者更高效地开发、测试、诊断并部署应用。通过插件，可以将本地应用一键部署到任意服务器，甚至云端（ECS、EDAS、Kubernetes 和 小程序云 等）；并且还内置了 Arthas 诊断、Dubbo工具、Terminal 终端、文件上传和 MySQL 执行器等工具。 准备： 1、Linux服务器一台,部署好JAVA环境 2、IDEA开发工具 3、vue项目一个 文章目录一、IDEA安装Alibaba
IDEA Dockerfile部署Vue项目
苏叶新城
09-22 818
前提条件 已部署好Docker环境 开启Docker的远程控制 查看Docker运行状态systemctl status docker 编辑图片中Docker服务文件 vim /usr/lib/systemd/system/docker.service 在ExecStart配置后添加-H tcp://0.0.0.0:2375 [Service] Type=notify # the default is not to use systemd for cgroups because the delegate
使用idea向docker容器推送--前端(VUE)
汪杰杰杰杰
04-12 975
使用idea向docker容器推送–前端(VUE) 文章目录使用idea向docker容器推送--前端(VUE)将项目打包执行 `npm run build` 打包前端项目配置服务器中的Docker容器地址（参考文章底部后端配置的方法）向Docker容器推送项目 将项目打包 执行 npm run build 打包前端项目 配置服务器中的Docker容器地址（参考文章底部后端配置的方法） 向Docker容器推送项目 使用Idea向docker容器推送–后端 ...
基于vue+springboot+mybatis+邮箱注册验证+docker实现员工工资系统
06-19
该系统是基于现代Web开发技术栈构建的，主要利用Vue.js作为前端框架，SpringBoot作为后端服务框架，MyBatis作为数据访问层组件，并且整合了邮箱验证功能以及Docker容器化部署。以下是这些技术在系统中的应用及重要性...
cenos7 下 docker 部署 vue+nginx
01-30
cenos7 下 docker 部署 vue+nginx 步骤
Django5+Vue3+Docker打造企业OA系统教程2024
05-31
Docker的优势在于它提供了一种轻量级、可移植、自包含的部署方式，使得应用程序的部署和运行更加简单高效。 二、什么是OA系统 OA系统，即办公自动化系统，是一种通过计算机和网络技术来管理和优化办公流程的系统。...
基于vue+node.js+mysql的网站商城
06-01
所用技术：vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等
＜一＞nginx部署vue项目
fraya1234的专栏
04-01 293
nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。本文主要记录使用nginx去部署使用vue搭建的前端项目，项目基于vue官方的脚手架vue-cli构建。 打包vue项目 在idea的Terminal命令窗口中输入：npm run build 通过上面命令后打包好的静态资源将输出到dist目录中。如图所示 安装nginx 到nginx官方下载系统相关的nginx版本安装 windows环境 下载相应的windows版本解压，解压...
【docker】vue 项目配置docker容器启动
quan
05-16 1943
本文使用的前端项目是 vue-element-admin；将这个项目配置为docker启动，本文主要介绍docker相关的配置；关于前端项目的一些操作，本文不作详解 想要了解vue-element-admin的朋友，请撮：https://panjiachen.github.io/vue-element-admin-site/zh/ 以下涉及创建的文件，本文后面会贴一个目录结构图，仅供参考 1、在项目的根目录创建Dockerfile文件： # Statusbar # # VERSION 1..
2020-08-16 docker安装nginx
idea1105936733的博客
08-16 120
docker容器命令大全 docker安装nginx： [root@localhost pingxixi]# docker pull nginx Using default tag: latest latest: Pulling from library/nginx bf5952930446: Pull complete cb9a6de05e5a: Pull complete 9513ea0afb93: Pull complete b49ea07d2e93: Pull complete a5e4a5
Idea使用Alibaba Cloud Toolkit一键部署
Xuhai0811的博客
02-27 332
Idea使用Alibaba Cloud Toolkit一键部署
IDE工具(42) Alibaba Cloud Toolkit 一键部署插件使用入门
郑清
07-05 8532
一、前言 Cloud Toolkit官方介绍文档：https://www.aliyun.com/product/cloudtoolkit Cloud Toolkit 是针对 IDE 平台为开发者提供的一款插件，帮助开发者更高效地开发、测试、诊断并部署应用。通过插件，您可以将本地应用一键部署到云端（ECS、EDAS、容器服务 Kubernetes 等）和任意服务器；并且它还内嵌了 Arthas ...
Alibaba Cloud Toolkit：本地应用一键部署到任何机器上
琦彦
01-11 8945
Alibaba Cloud Toolkit （后文简称 Cloud Toolkit）是阿里云针对 IDE 平台为开发者提供的一款插件，用于帮助开发者高效开发并部署适合在云端运行的应用。 您在本地完成应用程序的开发、调试和测试后，可以使用在 IDE （如 Eclipse 或 IntelliJ IDEA）中安装的 Cloud Toolkit 插件，通过图形配置的方式连接到云端部署环境并将应用程序快...
Docker部署springboot+vue
zerodiyi的博客
04-13 1013
/指定根目录文件,当访问localhost:80的时候，它会到容器内的 /usr/share/nginx/html/dist中去找index中指定的index.html文件, 没有的话，就会返回index.htm。docker cp nginx:/usr/share/nginx/html /zhan/nginx //这个就是将nginx容器中的html复制到了本地, 此时/zhan/nginx目录下就有了html和nginx两个文件夹。
docker构建vue项目镜像并发布到dockerhub中使用
12-09 875
先将本地vue项目打包为一个镜像，不会的可以看文章：使用docker构建vue项目并成功运行在本地和线上_1024小神的博客-CSDN博客然后开始注册一个dockerhub账号并登陆：然后点击 create repositoryDocker Hub 开始填写仓库名称和描述：（此仓库类似代码仓库，可以存储多个不同版本的镜像，就像代码迭代一样，每打一个tag，就相当于一个版本，都会在这个仓库里面进行管理） 然后回到本地，查看一下本地镜像：也可以先将容器变为镜像，或者直接tag一个已存在的镜像： 为镜像打一个
vue+nginx配置不带#的路径访问
youyudexiaowangzi的专栏
08-17 8274
vue+nginx去掉路径中的# nginx代理多个web项目，所以新增的vue web项目不能直接使用location / 现在有一个项目distribute，vue改动如下 1.修改路由src/router/index.js export default new Router({ base: '/distribute/', //多项目情况下的本项目名称 mode:'history'...
vue3+ts+vite项目nginx部署
04-16
要将Vue3 + TypeScript + Vite项目部署到Nginx服务器上，可以按照以下步骤进行操作： 1. 构建项目：在本地开发环境中，使用Vite构建工具将Vue3 + TypeScript项目打包成静态文件。在项目根目录下运行以下命令： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tom_wong666

码字不易，分享有功，期待赞赏！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值