日常学习之:如何使用 dockerfile 将 vue 的单独前端项目通过 docker 的方式部署到 heroku上

文章目录

  • 需求描述
  • 开始操作
    • 准备阶段:准备 server.js 文件并安装依赖,将 vue 项目包装成单独的服务器
      • 制作 server.js
      • 安装 server.js 需要的依赖
    • 构建 Dockerfile
    • heroku container 链接和部署
    • 其他细节

需求描述

  • 你想用 vue 构建前端,用 django 构建后端,并且你不想用一个服务器来运行整个项目,而是想分开两个服务器部署
  • 通过 heroku 来部署有三种方式
    • 本地项目文件夹直接关联 heroku 远程仓库,push 上去自动开展部署
    • 本地项目文件夹关联 github 远程仓库,github 远程仓库关联 heroku,每次 github push 自动部署
    • 本地项目文件夹直接构建 dockerfile,然后关联 heroku container,通过 heroku container 进行部署
  • 只有前端页面的话是无法部署的,所以准备阶段我们需要再 vue 中加一个 server.js 来将前端项目打包成一个服务器,然后整体部署

开始操作

准备阶段:准备 server.js 文件并安装依赖,将 vue 项目包装成单独的服务器

制作 server.js

.
├── README.md
├── babel.config.js
├── img.png
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── server.js
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── http.js
│   ├── main.js
│   ├── pages
│   └── router
├── todo.md
├── vue.config.js
  • 路径方面需要注意,server.js 是直接放在你的 vue 的根目录底下,也就是最外层
const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');const app = express();app.use('/', serveStatic(path.join(__dirname, '/dist')));
// 处理 SPA 的路由回退,确保重定向到 index.html
app.get('*', function (req, res) {res.sendFile(path.join(__dirname, '/dist', 'index.html'));
});
const port = process.env.PORT || 16000;
app.listen(port);console.log('Listening on port: ' + port);

安装 server.js 需要的依赖

  • 这一步是为了将这两个构建服务器需要的 package 写入 package.json,部署的时候方便
npm install express --save
npm install serve-static

构建 Dockerfile

  • 也是在 vue 项目目录的最外层(与 server.js同级),写入如下 Dockerfile
# 第一阶段:构建 =========================================
# 1. 指定平台,因为我本机是 mac 芯片的,而 docker 默认环境是 linux 所以我转换一下平台
# 2. 使用 Node.js 官方镜像作为构建环境, node:14 表示 node 的版本是 14
FROM --platform=linux/amd64 node:14 as build-stage# 设置工作目录,设置了之后就可以直接使用 . 来表示 docker 中的 /app
WORKDIR /app# 拷贝 package.json 和 package-lock.json (如果存在)
# COPY A B 是将 A文件夹或者文件拷贝到 B 文件夹或文件,下面命令中第二个位置是 ./ 代表将当前本地目录下 package.json 拷贝到 docker 的工作目录下,相当于 COPY package*.json /app
COPY package*.json ./# 安装项目依赖
RUN npm install# 拷贝项目文件和文件夹到工作目录
COPY . .# 构建应用
RUN npm run build
# ======================================================# 第二阶段:运行
# 再次使用 Node.js 镜像
FROM --platform=linux/amd64 node:14# 设置工作目录
WORKDIR /app# 将构建产物从构建阶段拷贝过来,因为docker 构建是层级结构, 所以相当于从上一层的缓存中 copy 过来
COPY --from=build-stage /app/dist /app/dist
COPY --from=build-stage /app/node_modules /app/node_modules
# 拷贝 server.js 
COPY server.js ./# 暴露 80 端口
EXPOSE 80# 启动应用
CMD ["node", "server.js"]

问题:这个项目里面为什么先 COPY package*.json ./ 再 COPY . ., 这两部分似乎可以合并

在 Dockerfile 中,将 COPY package*.json ./COPY . . 分开的原因是为了更有效地利用 Docker 的层级缓存机制。这种做法可以在某些情况下显著提高构建速度,尤其是在进行频繁的构建时。下面是详细解释:

层级缓存机制:

  • 当 Docker 构建镜像时,它会按照 Dockerfile 中的指令逐层构建,并为每一层生成一个缓存。
    如果某一层没有发生变化,Docker 就会重用这一层的缓存,而不是重新构建它。

优化依赖项安装:

  • 通过首先只复制 package.jsonpackage-lock.json 文件,然后运行 npm install,可以确保只有当这些文件发生变化时(即依赖项发生变化),Docker 才会重新安装依赖项。
  • 如果直接复制整个项目目录,那么任何文件的变化都会导致 Docker 无法使用缓存的依赖项层,因此即使只是源代码的一个小改动,也会导致 Docker 需要重新运行 npm install

提高构建效率:
在开发过程中,源代码的变化比依赖项的变化要频繁得多。因此,分开复制可以在大多数构建中避免不必要地重新安装依赖项,从而加快构建速度。
综上所述,尽管从技术上讲,将 COPY package*.json ./COPY . . 合并为一个步骤是可行的,但分开这两个步骤可以更好地利用 Docker 的层级缓存,从而提高构建效率,特别是在频繁的开发和构建过程中。

heroku container 链接和部署

  • 打开 heroku 并登录,create 一个 new app,这一步可以在 heroku 网站或者通过命令行完成
    在这里插入图片描述

  • 找到 deploy,并选择 container registry
    在这里插入图片描述

  • 接下来就是按照步骤执行,需要注意的是,你在 terminal 进行倒数两条命令的时候,一般需要再后面指定你的具体的 heroku app 名称,比如我在 heroku 上创建的 app 叫 alpha 那么我的命令就需要对应的改成

    heroku container:push web -a alpha
    heroku container:release web -a alpha
    

其他细节

  • 如果你需要和后端部署的服务器进行关联,那么请注意你的 vue 项目中链接后端项目的地址一定要对应的改好,注意点包括但不限于下面几点:
    • http -> https 如果后端部署到了服务器上,访问后端 api 的时候,就要使用 https 前缀
    • ws -> wss 对应的,如果建立 websocket 链接,就使用 wss 前缀
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/652023.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式六(模板方法模式)

是一种行为型的设计模式,将一些步骤的实现延迟到子类有些步骤是固定的可以抽取父类,在父类中实现各个步骤,并且在父类中定义一个流程控制方法,将某个容易发生变化的步骤定义为抽象方法,针对不同的子类实现不同的方法&a…

【设计模式】阿里终面:你觉得这个例子是策略模式吗?

什么是策略模式? 策略模式,举几个贴近生活的例子:当我们出行的时候,不同的出行方式就是不同的策略,例如走路、开车、骑自行车、坐飞机、坐邮轮等等,每一种出行方式都代表着不同的费用和时间;当…

关于css 的基础试题

CSS是什么的缩写&#xff1f; A. Creative Style SheetsB. Cascading Style SheetsC. Computer Style SheetsD. Colorful Style Sheets 在HTML中&#xff0c;通过什么标签引入CSS样式&#xff1f; A. <script>B. <style>C. <link>D. <css> 以下哪个选项…

make: *** No rule to make target ‘clean‘. Stop.

项目场景&#xff1a; 在Ubuntu下编写makefile文件编译的时候,出现make: *** No rule to make target ‘clean’. Stop. 问题描述 make: *** No rule to make target ‘clean’. Stop. 解决方案&#xff1a; 原本我makefile文件的名字是MakeFile , 把它改为makefile以后完美运…

腾讯云OpenCloudOS安装ES(elasticsearch7.17.16)

腾讯云OpenCloudOS安装ES&#xff08;elasticsearch7.17.16&#xff09; 下载ES 先从官网下载es的Linux解压包官网地址 https://www.elastic.co/cn/downloads/past-releases/elasticsearch-7-17-16 下载完成后&#xff0c;将其放置在自己想要放到的路径下 配置ES 解压文件 …

第五季特别篇:一夜杯、游戏之宴 2017.04.26

第五季特别篇&#xff1a;一夜杯、游戏之宴 2017.04.26 OVA 第1话&#xff1a;一夜酒杯 / 一夜杯OVA 第2话&#xff1a;游戏之宴 / 遊戯の宴 OVA 第1话&#xff1a;一夜酒杯 / 一夜杯 遭到独角妖袭击的妖怪夫妇日土和初菜被夏目所救&#xff0c;这对妖怪夫妇制作的酒杯&#xf…

R数据分析:非劣效性研究设计的统计处理方法,原理和实例

在我们经常接触的统计模式中&#xff0c;我们是在寻求推翻原假设&#xff0c;证明差异&#xff0c;这种统计模型在传统的临床试验中&#xff0c;在各种统计推断中已经成为默认了。在传统的临床试验中通常会将一种新的治疗方法与标准治疗或安慰剂进行比较&#xff0c;从而证明这…

【Spring Boot 3】【@Scheduled】动态删除定时任务

【Spring Boot 3】【@Scheduled】动态删除定时任务 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技…

###C语言程序设计-----C语言学习(5)#

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步&#xff01; 一. 主干知识的学习 1.switch语句 switch语句可以处理多分支选…

Linux详细笔记大全

第0章 Linux基础入门 什么是计算机 计算机的组成: 控制器,是整个计算机的中枢神经,根据程序要求进行控制,协调计算机各部分工作及内存与外设的访问等。 运算器,功能是对数据进行各种算术运算和逻辑运算。 存储器,功能是存储程序、数据和各种信号、命令等信息。 输入设备…

LeetCode链表总结

206.反转链表 两种方法&#xff0c;一种是迭代法&#xff08;头插法&#xff09;&#xff0c;一种是递归法。头插法比较简单&#xff0c;就不再多说了&#xff0c;讲下递归法。主要是要注意递归以后head->next指向的是哪个结点&#xff0c;其实head->next的指向是不变的…

第二模块 函数模块

第二模块 函数&模块 day09 文件操作相关1. 文件操作1.1 读文件1.2 写文件1.3 文件打开模式1.4 常见功能1.5 上下文管理练习题 2.csv格式文件3.ini格式文件4.XML格式文件4.1 读取文件和内容4.2 读取节点数据4.3 修改和删除节点4.4 构建文档 5.Excel格式文件5.1 读Excel5.1 写…

微信小程序之页面导航、生命周期和WXS脚本

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

STM32F407移植OpenHarmony笔记2

接上篇&#xff0c;搭建完开发环境后&#xff0c;我们还要继续工作。 官方合作的开发板刚好有STM32F407&#xff0c;我准备试一下开发板的demo&#xff0c;虽然我用的不是他们的开发板。 先下载以下3份代码&#xff1a; https://gitee.com/openharmony/device_board_talkweb…

Python 使用重构重命名一键更改变量名的方法

一个变量有多处引用的情况下&#xff0c;需要重命名&#xff0c;可以使用重构重命名进行一键更改。 方法是:选择变量名–>右键–>Refactor–>Rename&#xff08;也可以使用快捷&#xff1a;选择变量后按下ShiftF6&#xff09;&#xff0c;然后直接输入新的变量名即可…

基于Matlab/Simulink直驱式风电储能制氢仿真模型

接着还是以直驱式风电为DG中的研究对象&#xff0c;上篇博客考虑的风电并网惯性的问题&#xff0c;这边博客主要讨论功率消纳的问题。 考虑到风速是随机变化的&#xff0c;导致风电输出功率的波动性和间歇性问题突出&#xff1b;随着其应用规模的不断扩大以及风电在电网中渗透率…

[echarts] 图表工具栏 toolbox

option{// 工具栏配置toolbox:{id:1, // 组件IDshow:true, // 是否显示工具栏orient:horizontal, // 工具栏 icon 的布局朝向itemSize:15, // 工具栏 icon 的大小itemGap:10, // 工具栏…

DjangoURL调度器(二)

一、默认值与额外参数 1.1、默认值 1.1.1、urls.py from django.urls import pathfrom . import viewsurlpatterns [# http://127.0.0.1:8000/polls/blog/ 等同于 # http://127.0.0.1:8000/polls/blog/1/path(blog/, views.page),# http://127.0.0.1:8000/polls/blo…

springboot项目开发,使用thymeleaf前端框架的简单案例

springboot项目开发,使用thymeleaf前端框架的简单案例&#xff01;我们看一下&#xff0c;如何在springboot项目里面简单的构建一个thymeleaf的前端页面。来完成动态数据的渲染效果。 第一步&#xff0c;我们在上一小节&#xff0c;已经提前预下载了对应的组件了。 如图&#x…

vue之pinia存储和读取数据

我们已经搭建好了pinia的环境&#xff0c;现在我们使用pinia来存储和读取数据。Pinia是Vue的状态管理库&#xff0c;允许在Vue组件之间共享状态。 vue的pinia环境搭建 创建一个store文件&#xff0c;包含count.ts和lovetalk.ts&#xff0c;存储数据 import { defineStore }…