小知识:手把手教你实现Docker 部署 vue 项目

1.写在前面:

docker 作为轻量级虚拟化技术,拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思路和具体步骤,以方便有类似需要的同学参考。

docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源,通过容器就可以实现方便快速并且与平台解耦的自动化部署方式,无论你部署时的环境如何,容器中的应用程序都会运行在同一种环境下。(更多详情请移步docker官网查看docker

默认已经安装了 docker,@vue/cli

相关版本:

docker version 18.09.2, build 6247962

vue cli –version 3.3.0

macos mojave verison 10.14.1

运行环境为macos,如果与阅读者操作系统之间存在差异,请自行调整

相关镜像:

nginx:latest

node:latest

2.具体实现:

用 vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。

启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。

修改 vuenginxcontainer 的 nginx 配置,使前端页面的接口请求转发到 nodewebserver 上。

稍作优化和改进。

3 创建 vue 应用

3.1 vue cli 创建一个vue项目

%小知识:手把手教你实现Docker 部署 vue 项目-猿站网-插图

运行命令

yarn serve / npm run serve

%小知识:手把手教你实现Docker 部署 vue 项目-1猿站网-插图

访问 http://localhost:8081

%小知识:手把手教你实现Docker 部署 vue 项目-2猿站网-插图

3.2 改写

稍微改写一下页面,在app.vue中 传入helloworld 组件中的 msg 改为hello docker ; created 生命周期中加入一个接口请求

import axios from axios;

……

axios.get(/api/json, {
params: {}
}).then(
res =

声明: 猿站网有关资源均来自网络搜集与网友提供,任何涉及商业盈利目的的均不得使用,否则产生的一切后果将由您自己承担! 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除,制止非法恶意传播,不对任何下载或转载者造成的危害负任何法律责任!也请大家支持、购置正版! 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报,会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络,如有侵权烦请发送邮件至:2697268773@qq.com进行处理。
建站知识

小知识:centos6使用docker部署kafka项目的方法分析

2023-3-31 11:31:53

建站知识

小知识:基于Docker的MySQL主从复制环境搭建的实现步骤

2023-3-31 11:46:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索