Docker 部署前端项目流程

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Docker 部署前端项目流程相关的知识,希望对你有一定的参考价值。

参考技术A

docker images --- 查看所以镜像

docker search 镜像名 --- 搜索相关镜像

docker images | grep 镜像名模糊搜索

docker pull(-a) 镜像名:版本号 ---  拉取镜像,-a pull all

docker push 192.168.0.100:5000/ubuntu  ---  推送镜像库到私有源

docker rmi(-f) 镜像名:版本号/镜像 ID ---   删除镜像 (加上 -f 参数 强制删除)

docker rmi $(docker images -q) --- 删除所有镜像

docker ps --- 查看所以的容器

docker ps -a --- 查看所有容器的状态

docker exec -it 容器 name /bin/sh --- 进入容器

exit --- 退出容器

docker start/stop id/name[name...] --- 启动/停止某个(多个)容器

docker kill name[name...] --- 强制中断

docker restart name[name...] --- 重启

docker pause name  --- 暂停

docker unpause name --- 继续

docker rm name[name...] --- 移除容器

docker rmi (-f) name[name...] --- 移除镜像(-f:强制移除运行中容器)

一键删除所有 tag 为 none 的镜像

第一步:连接远程镜像仓库 (docker login ip 地址:端口号)
第二步:获取远程仓库中的镜像 (docker push 镜像名)
第三步:获取仓库中所有镜像 (docker images )
第四步:编写自己的 dockerfile 文件
第五步:build 当前镜像中的 dockerfile 文件,生成新的 dockerfile 文件。 (docker build -t 镜像名:tag . )
第六步:本地测试是否 build 成功 【本步骤可省略】, (docker run -p 8081:80 -d --name 容器名 镜像名:tag)

第七步:查看当前运行的容器 (docker ps )
第八步:测试成功后上传镜像, (docker push 镜像名:tag)
第九步:查看仓库中的所有镜像 (docker images)

本地环境

最后终端出现

手把手教学docker部署vue项目

前端不前端,不能只局限于写界面,我们还需要把项目部署到服务器,亲自感觉一下项目部署到发布具体的流程,下面是我使用docker部署vue项目中的具体步骤

准备阶段

首先我们需要准备一台虚拟机linux 有网 结束

安装docker

具体安装docker步骤

首先进入宿主机终端命令行 启动docker

service docker start

安装Nginx

1.取最新版的 Nginx 镜像
这里我们拉取官方的最新版本的镜像:

 docker pull nginx:latest

2.查看本地镜像
使用以下命令来查看是否已安装了 nginx:

 docker images

3.运行容器
安装完成后,我们可以使用以下命令来运行 nginx 容器:

docker run --name nginx-test -p 8080:80 -d nginx

参数说明:

–name nginx-test:容器名称。
-p 8080:80: 端口进行映射,将本地 8080 端口映射到容器内部的 80 端口。
-d nginx: 设置容器在在后台一直运行。

安装node

1.启动docker服务
首先启动docker服务:systemctl start docker

2.获取node最新镜像
启动完成之后拉取node最新镜像:docker pull node:latest
然后开始等待,最后拉取完成会有相应的输出信息。

我们再通过命令确认下node是否拉取成功:docker images

到这里,node最新镜像已被成功拉取下来。

3.运行镜像
接下来我们就要运行镜像:docker run -i -t node /bin/bash

常用参数:

-i:容器的标准输入保持打开
-t:让docker分配一个伪终端并绑定到容器的标准输入上
-p : 端口映射 格式为[主机端口:容器端口]
-d : 后台模式运行
-name : 给容器的起一个名字
-v:挂载主机的目录

这样node镜像就已经被成功启动起来啦,接下来我们看一下node的版本号:node -v

4.查看版本号

至此,docker中已成功安装完node.js。

vue-cli的安装

npm install -g @vue/cli

准备工作完毕,我们开始
首先我们是要有创建好的vue项目

我自己使用的是vscode 创建好项目 然后 npm run build

会生成一个dist文件夹,然后在文件夹中创建

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

自定义构建镜像的时候基于 Dockerfile 来构建。 FROM nginx 命令的意思该镜像是基于 nginx:latest
镜像而构建的。 COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下 dist
文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。 COPY nginx/default.conf
/etc/nginx/conf.d/default.conf 命令的意思是将 Nginx 目录下的 default.conf 复制到
etc/nginx/conf.d/default.conf,用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。

然后我们使用dist文件中 上传到linux中 ,接下来配置linux

本地创建一个docker 文件
mkdir docker

创建 Nginx Config配置文件
在docker文件夹下创建 Nginx 文件夹,该文件夹下新建文件 default.conf:

server {
listen       80;
server_name  localhost;

#charset koi8-r;
access_log  /var/log/nginx/host.access.log  main;
error_log  /var/log/nginx/error.log  error;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}

#error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
} 
该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html,所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。

基于该 Dockerfile 构建 Vue 应用镜像
运行命令(注意不要少了最后的 “.” ):

docker build -t vue-demo .

查看本地镜像,运行命令:

docker image ls | grep vuenginxcontainer


到此时我们的 Vue 应用镜像 vue-demo已经成功创建。接下来,我们基于该镜像启动一个 Docker 容器。
启动 Vue app 容器
Docker 容器Container: 镜像运行时的实体。镜像(Image)和容器(Container)的关系,就像是面向对象程序设计中的类和实例一样,镜像是静态的定义,容器是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等 。

基于 vue-demo镜像启动容器,运行命令:

docker run -p 3000:80 -d --name vueApp vue-demo

docker run 基于镜像启动一个容器
-p 3000:80 端口映射,将宿主的3000端口映射到容器的80端口
-d 后台方式运行
–name 容器名,查看 Docker 进程

docker ps

以上是关于Docker 部署前端项目流程的主要内容,如果未能解决你的问题,请参考以下文章

Docker 部署 Spring Cloud 项目详细步骤

手摸手教你docker+jenkins+gitlab部署你的前端项目

前端Vue+后端Django项目创建以及自动部署流程

前端Vue+后端Django项目创建以及自动部署流程

前端项目搭建部署全流程:webpack配置

项目上线流程