温馨提示：如果有自己的服务器最好不过了，这样部署网项目就可以上线了。没有的话，只能使用localhost 本机访问啦，记得替换 ngixn 中的ip地址、域名为localhost。 (一) 准备工作一、安装1、安装Docker并配置阿里云仓库加速① 环境查看，选择对应的docker的安装版本：docker 帮助文档：https://docs.docker.com/get-started/overv
转载
2023-08-11 16:55:23
181阅读
docker自动化部署前端项目实战本文适用于个人项目，如博客、静态文档，不涉及后台数据交互，以部署文档为例。思路利用服务器node脚本，监听github仓库webhook push事件触发post请求，自动拉取最新代码，再用docker接管项目编译、部署。环境本文使用云服务器搭建，环境版本：OS：CentOS Linux release 8.2.2004docker：19.03.12node：14
转载
2023-07-20 15:31:59
66阅读
一、Element-UI 1、介绍Element-Ul是饿了么前端团队推出的一款基于Vue.js2.0 的桌面端UI框架。 2、安装成功安装项目模板后，我们需要安装element-ui到项目下npm install element-uinpm install element-plus --save //能更好地和 webpack 打包工具配合使用接下来即可参照Element-ui的
转载
2023-12-15 16:39:13
54阅读
开发环境的搭建，是新人入职后的第一道槛，有时一个小小的问题就能阻塞半天。如果能提供一个工具在短时间内搞定开发环境，势必提高新人对团队的印象分！docker就是这样一个工具。镜像&容器docker有个重要的概念叫镜像，官方概念比较拗口，这么解释比较容易理解：docker仓库有很多镜像，包括node、nginx、redis等等，一个镜像一般解决一个问题，镜像没有状态，而且永远不会改变。容器，是
转载
2023-07-18 17:19:25
128阅读
Docker 作为一种新兴的虚拟化方式，跟传统的虚拟化方式相比具有众多优势。《Docker 与前端》系列文章，旨在记录如何通过 docker 构建一个相对完备的前端自动化开发环境。
Docker 是一个开源的容器引擎，可以方便的对容器进行管理。作为一种新兴的虚拟化方式，跟传统的虚拟化方式相比具有众多优势。《Docker 遇见前端》系列文章，旨在记录如何通
转载
2024-06-11 17:57:33
31阅读
Docker 部署项目目录Docker 部署项目一、安装docker（Ubuntu）二、docker仓库配置1、设置公有仓库2、设置私有仓库1）搭建私有仓库——私有服务器上2）设置私有仓库三、拉取镜像1、登录仓库2、拉取镜像四、dockerfile编写1、RUN2、COPY3、CMD4、ENV5、ARG6、VOLUME7、EXPOSE8、WORKDIR9、USER10、ONBUILD11、ENTR
转载
2024-06-01 17:23:53
153阅读
作者：一个在外讨生活的新时代农民工。 docker-compose安装nginx并部署前端项目前言制作docker-compose.yml文件创建挂载目录创建Nginx配置文件前端工程部署启动容器放开端口放开防火墙端口访问一下我们的前端吧后记 前言因为最近在公司，需要安装一套测试环境，便实操沉淀了此篇文章，后续会出一篇Docker的基础知识以及原理。docker-compose安装nginx的前提
转载
2024-04-11 21:07:35
55阅读
一. 前言在上一文中 点击跳转 通过IDEA集成Docker插件实现微服务的一键部署，但 youlai-mall 是前后端分离的项目，除了后端微服务的部署之外，当然还少不了前端工程的部署。所以本篇讲述如何通过Docker安装Nginx实现前端Vue项目工程的部署。二. Docker安装Nginx1. 创建目录mkdir -p /usr/share/nginx/conf
mkdir -p /usr/
转载
2024-04-29 10:57:37
29阅读
Docker的诞生我们总是会遇到测试对开发说项目又不work了，开发总说：在我电脑上是ok的阿。
项目组加了新人，我们就需要教新人配置各种开发环境，每换一台机器就要配置一次，每来一个新人就要配置一次。
于是我们想，有什么办法可以在安装软件的时候把环境也安装过来？一摸一样复制过来就没这么多问题了。
于是，我们开始用虚拟机，它自己一套系统，然后你在里面配置好环境，复制给队友就好了。根本上虚拟机也是一个
转载
2023-08-24 14:40:59
62阅读
随着前端开发效果越来越丰富，前端的结构也越来越复杂，这个时候就需要一个工具来进行管理，可以帮你做语法校验，文件拼接，代码压缩，文件清理等等琐事，Grunt就是这么一个不错的工具。安装并不复杂，只要先安装nodejs和npm即可，这里介绍Ubuntu上的安装过程，不过Windows平台更加简单，去nodejs的官网下载一个稳定版本安装一下就完事了。 sudo apt install nodejs
最近公司在推进容器化和k8s，项目都要改成Docker部署。负责的工程里有几个node项目，只能从零开始学习Docker了。基础篇安装Docker支持window, Mac, Linux, 教程参考 Docker安装教程建议在Mac和Linux系统里使用Docker。日常开发，我使用的是vscode编辑器，可以顺便安装docker插件。在插件商店搜索docker，安装完成后，我们可以很方便的管理D
转载
2024-03-09 13:21:55
57阅读
# Docker前端开发入门指南
## 什么是Docker前端？
Docker前端开发是指利用Docker技术来构建和部署前端应用程序的开发方式。Docker是一种轻量级容器技术，能够将应用程序及其所有依赖项打包到一个可移植的容器中，并在不同的环境中运行，大大简化了应用程序的部署和管理过程。
传统的前端开发方式需要在本地环境中搭建开发环境、安装依赖、进行测试，然后再将应用部署到服务器上。而使
原创
2024-06-11 03:38:18
28阅读
# 前端docker科普
## 什么是前端docker
Docker是一种容器化技术，它可以让开发者将应用程序及其依赖项打包成一个容器，使其可以在任何地方运行。前端docker指的是使用Docker技术来构建、部署和运行前端应用程序的环境。
在传统开发中，前端开发者通常需要在本地安装多个工具和依赖项，比如Node.js、npm、web服务器等。而通过使用前端docker，开发者可以将这些工具
原创
2024-05-25 05:36:35
37阅读
前端集成docker开发环境这里不再赘述，网上有好多教程，推荐直接使用dockerFile就行了，后期patch也方便；docker命令繁琐吗？前端使用docker去集成开发环境时,确实是方便多了，每次需要新的开发，直接使用使用镜像来启动新的容器；挂在目录即可；但是一个问题随之而来，每次启动docker都会附带好多内容；例如基本的镜像名、端口、挂在目录等，都是一长坨；输入不了几次就会有放弃使用的念
转载
2023-08-14 15:57:23
83阅读
# 在Docker中发布前端应用的流程
在现代开发中，Docker已经成为一种流行的工具，用于简化应用的部署和管理。在发布前端应用时，您可能会问是否需要安装Nginx。答案是，不一定需要，但使用Nginx作为反向代理或静态文件服务器是很常见的做法。以下是整个过程的详细流程和每一步的说明。
## 流程步骤表
| 步骤 | 描述
在 Mac 上使用 Docker 安装 Redis 和 MySQL 可以快速搭建开发环境。以下是完整的 Docker 安装、运行、持久化 Redis 和 MySQL 的详细教程。? 1. 安装 Docker如果你的 Mac 还没有安装 Docker，按照以下步骤安装：访问 Docker 官网 下载 Docker Desktop安装后 启动 Docker，并在终端输入以下命令检查：docker -v
1. 制作Docker镜像Dockerfile是一个由一堆命令+参数构成的脚本， 使用docker build即可执行脚本构建镜像， 自动的做一些事，主要用于进行持续集成。 一般， Dockerfile共包括四部分：基础镜像信息 不可能从头到尾创建一个完整的镜像, Docker镜像是分片的文件系统, 如果从头到尾创建就是重复劳动, 可以基于别人创建好的基础上添加.维护者信息镜像操作指令容器启动时执
转载
2023-09-02 10:02:13
160阅读
前端打包添加打包命令运行打包代码打包指定不同的环境变量打包自定义文件移除三方包gzip压缩打包部署模式 添加打包命令package.json中添加配置 npm run build 发布到线上的代码 不便于调试 命令： ①npm run build:dev 开发调式环境 ②npm run build:prod 线上调试环境"build:dev": "vue-cli-service build --
转载
2023-10-01 17:19:49
134阅读
前期准备· 基于Centos7系统云服务器一台。· 基于Vue-cli的项目部署在gitlab之上。部署目标搭建Docker+Nginx+Jenkins环境，用于实现前端自动化部署的流程。具体的实现效果为开发人员在本地开发，push提交代码到指定分支，自动触发jenkins进行持续集成和自动化部署。可以设置在部署完成后通过邮件通知，部署的成功与否，成功后会将打包后的文件上传到服务器，通过nginx
转载
2023-11-21 21:32:10
81阅读
目前项目开发方式基本采用前后端分离的方式。前端作为一个独立的项目，一般是使用Webpack方式进行编译打包生成 dist 目录（特指vue项目），再通过Nginx单独进行部署。 为了和基于Docker的部署方式有个对比，我们先来说下服务器部署方式服务器部署方式一般来说，常规的部署方式的流程基本如下：服务器环境配置及安装 nginx将项目dist目录上传到服务器的指定位置修改 nginx安装目录/c
转载
2023-08-18 14:01:55
335阅读
