[部署02] Docker 部署vue项目

2021-09-19  本文已影响0人  woow_wu7
image

导航

[深入01] 执行上下文
[深入02] 原型链
[深入03] 继承
[深入04] 事件循环
[深入05] 柯里化 偏函数 函数记忆
[深入06] 隐式转换 和 运算符
[深入07] 浏览器缓存机制（http缓存机制）
[深入08] 前端安全
[深入09] 深浅拷贝
[深入10] Debounce Throttle
[深入11] 前端路由
[深入12] 前端模块化
[深入13] 观察者模式 发布订阅模式 双向数据绑定
[深入14] canvas
[深入15] webSocket
[深入16] webpack
[深入17] http 和 https
[深入18] CSS-interview
[深入19] 手写Promise
[深入20] 手写函数

[react] Hooks

[部署01] Nginx
[部署02] Docker 部署vue项目
[部署03] gitlab-CI

[源码-webpack01-前置知识] AST抽象语法树
[源码-webpack02-前置知识] Tapable
[源码-webpack03] 手写webpack - compiler简单编译流程
[源码] Redux React-Redux01
[源码] axios
[源码] vuex
[源码-vue01] data响应式 和 初始化渲染
[源码-vue02] computed 响应式 - 初始化，访问，更新过程
[源码-vue03] watch 侦听属性 - 初始化和更新
[源码-vue04] Vue.set 和 vm.$set
[源码-vue05] Vue.extend

[源码-vue06] Vue.nextTick 和 vm.$nextTick

前置知识

一些单词

prerequisites：先决条件
( meet the prerequisites 满足前提条件 )

Community：社区的

associated：关联的
( along with associated dependencies 以及相关的依赖关系 )

exactly：确切的
( "docker build" requires exactly 1 argument 确切的只需要1个参数 )

denied：拒绝

//2021-06-15 更新
daemon: 守护进程 // docker默认情况下是在守护进程中工作

yum命令

yum [options] [command] [package ...]

(1) yum 和 rpm 的关系

(2) yum 安装的包的路径

yum 的安装的包的具体路径路径 --- 比如 python

// (1) yum install python ------------------------------- 安装 python

(2) rpm -qa python -------------------------------------- 查找具体安装的 python 包的包名
// python-2.7.5-68.el7.x86_64

(3) rpm -ql python-2.7.5-68.el7.x86_64 ------------------ 列出这个包的所有文件的路径
image image

Docker

Docker三个基本概念 - Container Image Repository

image

docker安装

docker 安装过程


(1) 如果安装过Docker，先卸载 docker 或者 docker-engine 以及相关的依赖
$ sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine


(2) 安装Docker需要的相关插件
- yum-utils
- device-mapper-persistent-data
- lvm2
$ sudo yum install -y yum-utils \
  device-mapper-persistent-data \
  lvm2


(3) 设置稳定的存储库 - 仓库
- 官方仓库
$ sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
- 阿里云仓库：如果安装太慢，用阿里云镜像
$ sudo yum-config-manager \
    --add-repo \
    http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo    
    
    
(4) 启用存储库（可选）
$ sudo yum-config-manager --enable docker-ce-nightly


(5) 安装最新版本的Docker Engine-Community和containerd
$ sudo yum install docker-ce docker-ce-cli  containerd.io
    - 1. 查询可用版本：
        - yum list docker-ce--show duplicates| sort-r
    - 2. 安装指定版本
        - $ sudo yum install docker-ce-<VERSION_STRING> docker-ce-cli-<VERSION_STRING> containerd.io
        - $ sudo yum install docker-ce-[第一步查出来的版本号] docker-ce-cli-[在使用1中的查询查出cli的版本] containerd.io


(6) 启动 - 安装完成后
$ sudo systemctl start docker


(7) 验证 hello-world
$ sudo docker run hello-world
image

docker常用命令

docker相关

docker相关

启动docker --------------------- systemctl start docker   ( ctl是control的缩写 )
停止docker --------------------- systemctl stop docker
重启docker --------------------- systemctl restart docker
开机启动docker ----------------- systemctl enable docker   ( ！！！！！！！ )
查看docker概要信息 ------------- docker info
查看docker帮助文档 ------------- docker --help
查看docker版本信息 ------------- docker version

Image镜像相关

Image镜像相关


列出所有镜像 ---------------------------- docker images
             ---------------------------- docker images -a 所有镜像
             ---------------------------- docker images -q 只显示镜像ID
             
搜索镜像 -------------------------------- docker search
             ---------------------------- docker search -s 40 nginx 列出收藏数字不小于40的nginx镜像
             
下载镜像 -------------------------------- docker pull
         -------------------------------- docker pull nginx 从远程仓库拉取nginx镜像
         -------------------------------- docker pull nginx:[tag] 拉取指定版本
         -------------------------------- docker pull nginx:7 拉去7版本
         
删除镜像 -------------------------------- docker rmi 
         -------------------------------- docker rmi nginx 删除最新的ngix镜像，latest
         -------------------------------- docker rmi nginx:7 删除具体的某个镜像，需要镜像名称和tag版本号
         -------------------------------- docker rmi -f nginx:7 强制删除某个镜像，必须镜像已经创建的容器正在运行时使用
         -------------------------------- docker rmi -f nginx centos 删除多个镜像，用空格隔开
         -------------------------------- docker rmi -f $(docker images -qa) 删除全部镜像

container容器相关

container容器相关


新建一个容器：
docker run -it --name 容器名称 镜像ID ------------ 来运行一个容器，取别名，交互模式运行，以及分配一个伪终端
-i  以交互模式运行容器
-t  为容器重新分配一个伪输入终端
--name  为容器指定一个名称
- d 后台运行容器，并返回容器ID


列出正在运行的容器 ------------------------------ docker ps
列出所有的容器 ---------------------------------- docker ps -a
列出最近创建的三个容器 -------------------------- docker ps -n 3
列出已经停止的容器 ------------------------------ docker ps -f status=exited

退出容器 ---------------------------------------- exit (或者ctrl+p+q)
进入容器 ---------------------------------------- docker attach 容器ID | 容器名称
启动容器 ---------------------------------------- docker start 容器ID | 容器名称
重启容器 ---------------------------------------- docker restart 容器ID | 容器名称
停止容器 ---------------------------------------- docker stop 容器ID | 容器名称
暴力停止容器 ------------------------------------ docker kill 容器ID | 容器名称

删除容器 ---------------------------------------- dokcer rm -f 容器ID | 容器名称
删除所有容器 ------------------------------------ docker rm -f $(docker ps -qa) 删除全部容器
( 注意区分删除镜像 ------------------------------ docker rmi -f $(docker images -qa) 删除全部镜像
( 已经在运行的容器，或者镜像创建的容器正在运行想删除，用 -f 强制删除 )


container容器相关 - 进阶命令


以守护方式启动容器 ------------------------ docker run -di --name 容器名称 镜像ID
// 不会进入容器，并且会返回容器ID

进入容器，并执行命令 ---------------------- docker exec -it 容器ID | 容器名称 执行命令
// 进入容器 ------------------------------- docker attach 容器ID | 容器名称

查看容器日志 ------------------------------ docker logs 容器ID | 容器名称

查看容器进程 ------------------------------ docker top 容器ID | 容器名称

宿主机拷贝文件到容器 ---------------------- docker cp 需要拷贝的文件或目录 容器id|名称 ：容器目录
容器文件拷贝到宿主机 ---------------------- docker cp 容器id|名称:文件目录|文件 宿主机目录
image

例下图：从宿主机中拷贝b.png到容器mycentos的tem文件中


image

例下图：容器拷贝文件夹到宿主机


image

例下图：以守护方式启动容器 ------------------------ docker run -di --name 容器名称 镜像ID


image

docker宿主机和容器之间的端口映射

docker run -it -p 8080:8000 镜像ID

-p ------------ 指定端口映射，格式为 ( 主机端口:容器端口 )


// docker run -it mycomcat -p 8080:8000 镜像ID -----------  指定宿主机和容器之间的端口映射
// docker run -di --name 容器名称 镜像ID -----------------  以守护方式启动容器  
// docker run -it --name 容器名称 镜像ID ------------------ 来运行一个容器，取别名，交互模式运行，以及分配一个伪终端

docker commit - 提交运行时的容器作为镜像

docker commit -a='作者' -m='备注' 运行时的容器ID 新镜像名称
image

docker push 推送镜像到服务器

docker login

docker tag 镜像名 Repository/name:tag
// 这个Repository是在hub上的repository，name也是在那里设置的，tag名自己取比如1.1.1或者v1等

docker push 镜像名:标签号



----
具体如下
docker tag woow_wu7/tomcat hanxian/woow_wu7:v1
git push hanxian/woow_wu7:v1
image

Dockerfile

语法 说明
FROM 引用基础镜像 - from
MAINTAINER 维护者 - maintainer
name<邮箱或者电话>
LABEL 对镜像的描述，类似于注释 - label
name="xxxx" \
date="xxxx"
ENV 设置容器内的环境变量和常量
在其他地方通过 ( $ ) 来引用该环境变量的值
ARG 和ENV的作用相似，都是设置 - 环境变量
不同点：ARG 所设置的构建环境的环境变量，在将来容器运行时是不会存在这些环境变量的。但是不要因此就使用 ARG 保存密码之类的信息，因为 docker history 还是可以看到所有值的。

Dockerfile 中的 ARG 指令是定义参数名称，以及定义其默认值。
该默认值可以在构建命令 docker build 中用 --build-arg <参数名>=<值> 来覆盖
ARG 指令有生效范围，如果在 FROM 指令之前指定，那么只能用于 FROM 指令中
WORKDIR 当前的工作目录，即是进入容器后，默认所在的当前目录
RUN 在新建镜像时执行的命令 - run
比如 RUN yum -y install Vim 表示用yum来安装 Vim 包
EXPOSE 暴露端口 - expose
CMD 设置容器启动后默认执行的命令和参数
比如 CMD /bin/bash
- 如果docker run的时候指定了其他CMD命令，Dockerfile中的CMD命令被忽略；如果定义了多个CMD，只有最后一个会执行
- CMD ["/bin/echo","hello docker"]
ENTRYPOINT 设置容器启动时运行的命令
ADD ADD除了COPY还有额外解压功能
COPY 拷贝文件 
FROM centos

MAINTAINER woow_wu7<woow.wu7@gmail.com>

LABEL name="hanxian"

ENV WORKPATH /
WORKDIR $WORKPATH

RUN yum -y install net-tools

RUN yum -y install vim

CMD /bin/bash

// CMD ["nginx", "-g", "daemon off;"]
// 注意：这里 nginx -g daemon off 表示不是使用守护进程，即容器启动nginx后不会立即退出
// 因为：容器启动nginx后会立刻退出，所以需要使用nginx的前台运行模式，关掉daemon off表示关闭守护进程模式
// 命令：nginx -g => 1.-g表示指定配置指令   2.daemon off关闭守护进程

使用 Dockerfile 构建自定义 centos镜像 -- docker build

  1. 编写号 Dockerfile 文件
  2. 执行命令
    • docker build -f Dockerfile的路径 -t 镜像的名字：标签 .
    • docker build -f 路径/Dockerfile文件名 -t Repository/name:tag.
    • 注意最后面的 .
  3. 构建镜像成功后，就可以新建容器了 docker run -it --name 容器名称 -p 8888:7000 镜像ID
  4. 验证 因为添加了一些包，所以使用 ifcofnig 或者 vim 看安装好了没 
2. docker build

在根目录下执行
docker build -f dockerfile/dockerfile -t hanxian/woow_wu7:v1 .

3. build成功后，新建容器

docker run -it --name '随便取' -p 2000:3000 e697c3799626

4. 验证

ifconfig
// vim a.txt
// wq
image

RUN 和 CMD 和 ENTRYPOINT 三者的区别

RUN CMD ENTRYPONT区别总结

(1) ( RUN ) 是构建镜像时执行的命令 ( docker build )，而 ( CMD和ENTRYPOINT ) 是容器启动时执行的命令 ( docker run )
(2) 三者都都支持 exec 和 shell 方式
(3) 常用方式：( 单独的CMD ) 或者 ( 先ENTRYPOINT后面跟一个CMD )
(4) 多个CMD只有最后一个CMD生效
(5) 命令行带参数，CMD将失效而ENTRYPOINT不受影响


案例1：
CMD ["catalina.sh", "run"]
- "catalina.sh"：可执行文件
- "run"：参数


案例2：
ENTRYPOINT ["docker-entrypoint.sh"] // --- ENTRYPOINT 和 CMD 的组合

EXPOSE 6379
CMD ["redis-server"] // ------------------ 因为上面有ENTRYPOINT，所以CMD中的值会作为ENTRYPOINT的参数

数据卷 volume

为什么需要数据卷

什么是数据卷

如何用命令实现数据卷 - 配置数据卷volume

案例：

docker run -it --name c2 -v /root/data:/root/data_container -p 3000:4000 470671670cac
(1) 以镜像ID ( 470671670cac ) 创建容器
(2) 镜像取名：c2
(3) 数据卷 ( 宿主目录/root/data ) 对应 ( 容器目录/root/data_container )
(4) 端口映射 3000:4000
(5) -p 是port的意思

volume 相关命令

命令 说明
docker volume create 创建数据卷
docker volume inspect 显示数据卷的详细信息
docker volume ls 列出所有的数据卷
docker volume prune 删除所有未使用的 volumes，并且有 -f 选项
docker volume rm 删除一个或多个未使用的 volumes，并且有 -f 选项
image image image

数据卷容器

(1) 创建数据卷容器 c3
docker run -it --name=c3 -v /volume -p 1000:2000 5e35e350aded /bin/bash


(2) 创建需要共享数据可以做映射的普通容器 c1
docker run -it --name=c1 --volumes-from c3 -p 3000:4000 5e35e350aded /bin/bash
image image image

docker 镜像加速器

image

Docker 部署 Vue项目 到服务器

(1) 一个ceontos系统的服务器


(2) 安装docker


(3) docker pull nginx:tag ------------------------------------------------ 从远程repository仓库拉取nginx镜像
// 查看所有镜像 docker images -a
// 搜索某个镜像 docker search -s 40 nginx
    // -s 40 表示收藏数不小于40的镜像
// 删除某个镜像 docker rmi -f nginx:tag
// 删除所有镜像 docke rmi -f $(docker iamges -qa)
    // -rmi 中的 i表示 images 的意思
    
   
    
(4) 在宿主机上新建用来做映射的文件
/home
    |---workspace
           |----nginx
                  |----conf.d
                  |----html.d
在 cong.d中创建 default.conf 文件，里面是nginx的配置
在 html.d中创建 index-test.html 文件，随便写点东西
+++++ default.conf 内容如下 +++++ 
server {
    listen       80;
    server_name  localhost;
    # 原来的配置，匹配根路径
    #location / {
    #    root   /usr/share/nginx/html;
    #    index  index.html index.htm;
    #}
    # 更该配置，匹配/路径，修改index.html的名字，用于区分该配置文件替换了容器中的配置文件
    location / {
        root   /usr/share/nginx/html;
        index  index-test.html index.htm;
    }
}
+++++ index-test.html +++++ 
<html>
  <body>
    <h2>nginx server test and docker data volume test</h2>
  </body>
</html>




(5) 新建并执行容器
    docker run -d --name=nginx-8080 -p 8080:80 \
    -v /home/workspace/nginx/conf.d:/etc/nginx/conf.d \
    -v /home/workspace/nginx/html.d:/usr/share/nginx/html \
    6678c7c2e56c 


// docker run -it --name=nginx-8080 -p 8080:80 镜像ID ----------------- 根据镜像创建执行容器
// 注意这里腾讯云可以访问不到，因为nginx默认端口是80不要写成别的端口了
// 关闭容器：docker stop 容器ID | 容器名称
// 注意：不要加上 /bin/bash 不然启动后nginx映射的端口不能访问

nginx ( 容器 ) 内的一些文件位置：-------------------------- 注意是容器中的nginx，而不是真实的nginx项目路径
- 日志位置：/var/log/nginx/
- 配置文件位置：/etc/nginx/
- 项目位置：/usr/share/nginx/html



(6) 反向代理 
1. 在宿主机上新新建conf.d2文件夹
/home
    |---wrokspace
           |----nginx
                  |----conf.d
                  |----html
                  |----conf.d2
2. 在 conf.d2 新建 default.conf 文件
server {
    listen       80;
    server_name  localhost;
    location / {
        proxy_pass   http://49.233.215.163:8080;
    }
}
这样访问  http://49.233.215.163 会被代理到 http://49.233.215.163:8080



(7) 负载均衡
/home
    |---workspace
           |----nginx
                  |----conf.d
                  |----html
                  |----conf.d2
                  |----html3
html3文件新建index-test.html
<html>
  <body>
    <h2>html - 8081</h2>
  </body>
</html>

执行命令
 docker run -it --name=payload -p 3000:3000 \
 -v /home/workspace/nginx/conf.d3:/etc/nginx/conf.d \
 6678c7c2e56c


(8) vue 项目上传gitlab


(9) 服务器中安装 git 拉取前端在gitlab中的项目
1. yum install -y git
// -y 的作用是下载过程中可能会有对话让你选择yes还是no， -y就会自动的选择yes
// yum 是从远程下载安装，rpm是从本地下载安装
// 查看是否安装成功可以使用 git version  或者 git help -a 等命令来判断
2. 下载完git后设置git相关的 user.name user.email ssh-keygen并把ssh key 添加到gitlab账号中
git config --global user.name "your name"
git config --global user.email "your emial"
ssh-keygen -t rsa -C "your emai"
在gitlab中添加ssh key
在服务器中新建文件夹用于拉取前端的项目 /home/workspace/project
git clone 下载项目
// 设置好name，email后可以通过 git config --global --list 查看
// 公钥的文件路径：/root/.ssh/id_rsa


(10) 安装 node - 用于打包，本地启动服务，执行 script 命令等
[1]
yum install epel-release
yum install nodejs
// node -v 查看是否安装成功，版本
// npm -v 查看npm版本，注意node自带npm
// 注意：这样下载的node版本过低，需要升级！！！！！！！！！！！！！！！！！！！！！！
// 升级方法：https://juejin.im/post/6844903733239742477
    // npm install npm@latest -g
    // sudo npm cache clean -f
    // sudo npm install -g n
    // sudo n stable
[2] 上的方法放弃了，版本太低，升级麻烦，使用[2]
    下载nodejs最新的tar包
     wget -c https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz    
     
     解压包
     tar -xvf node-v12.16.1-linux-x64.tar.xz
     
     部署bin文件 - 相当于快捷方式
     ln -s ~/node-v12.16.1-linux-x64/bin/node /usr/bin/node
     ln -s ~/node-v12.16.1-linux-x64/bin/npm /usr/bin/npm
     
     测试
     node -v
     
    



(11) 打包前端项目
1. 进入在服务器中下载好的前端项目文件夹 /home/workspace/project/hasaki
2. npm install 安装前端依赖
3. npm run build
4. 这样会生成一个文件夹 dist/


(12) 利用docker中的nginx镜像新建容器，启动server
docker run -di --name=deploy-vue -p 7000:80 -v /home/workspace/project/hasaki/dist:/usr/share/nginx/html 6678c7c2e56c
// dist目录映射到/usr/share/html目录中


(13) 优化流程 创建deploy.sh 文件
sh deploy.sh

--------------
ploy.sh文件如下
--------------
# 拉取代码
git pull

# install 依赖
# npm install 

# build
npm run build

# 删除容器
docker rm -f deploy-vue 

# 启动容器
docker run -d --restart=on-failure:5 \
  -p 7000:80 \
  -v /home/workspace/project/hasaki/dist:/usr/share/nginx/html \
  --name=deploy-vue \
  6678c7c2e56c
  
  

(16) 
因为：当使用nginx反向代理时，因为vue中output的publicPath是根路径导致服务器中的资源路径不一样
所以：资源加载不到报404

解决方法：在vue.config.js中设置 ( publicPath='./' ) 相对路径
image image image

docker 部署 mysql

(1) docker pull mysql:5.6


(2) cd /home/workspace


(3) mkdir mysql && cd mysql


(4) docker run -id \
-p 3307:3306 \
--name=mysql_c1
-v $PWD/config:/etc/mysql/conf.d \
-v $PWD/logs:/logs \
-v $PWD/data:/var/lib/mysql \
-e MYSQL_ROOT_PASSWORD=123456 \
mysql:5.6 \
/bin/bash

// $PWD ---------------------------------------------- 当前目录的绝对路径
// $PWD/config:/etc/mysql/conf.d --------------------- 将...../config/my.cnf 映射到 /etc/mysql/conf.d/my.cnf
// $PWD/logs:/logs ----------------------------------- 映射logs目录
// $PWD/data:/var/lib/mysql -------------------------- 映射data目录
// -e MYSQL_ROOT_PASSWORD=123456 ---------------------- 初始化root用户的密码
// -e 是env的意思，环境变量
// docker run -id -p 3307:3306 --name=mysql_c1 -v $PWD/config:/etc/mysql/conf.d -v $PWD/logs:/logs -v $PWD/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 mysql:5.6 /bin/bash
// /bin/bash主要是为了解决容器启动后马上关闭的bug
// 注意：第四步执行的目录是在第三步的目录中，即 ( /home/workspace/mysql = $PWD )


(5) 进入mqsql容器，并启动mysql
docker exec -it mysql_c1 /bin/bash
mysql -uroot -p123456
// docker exec -it mysql_c1 /bin/bash ------- 交互式进入mysql_c1容器并执行命令/bin/bash
// mysql -uroot -p123456 -------------------- 用户名root 密码123456


(6) 当在(5)执行mysql -uroot -p123456时，
1.
报错：Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'
原因：没有启动mysql
解决办法：
1. 在mysql的容器中执行 /etc/init.d/mysql start --skip-grant-tables
2. 在执行mysql -uroot -p 回车
3. 回车后让输入密码，此时不输入任何密码直接回车

2. 报错ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
解决办法：在mysql的容器中执行 /etc/init.d/mysql start --skip-grant-tables
即：加上--skip-grant-tables


(7) 
show database;
create database db1;
show databases;
use db1;


(8) 用Navicate连接docker中的mysql
报错：通过Navicat for MySQL远程连接的时候报错mysql 1130的解决方法
解决资料: https://www.cnblogs.com/happyyangyanghappy/p/10728699.html
解决方法：
mysql -u root -p  
mysql;use mysql;  
mysql;select 'host' from user where user='root';  
mysql;update user set host = '%' where user ='root';  
mysql;flush privileges;  
mysql;select 'host'   from user where user='root';
image image image image

centos目录结构

image

资料

入门 http://dockone.io/article/8350
yum命令 https://www.runoob.com/linux/linux-yum.html
centOS安装Docker教程 https://juejin.im/post/6844903990002450439
阮一峰 http://www.ruanyifeng.com/blog/2018/02/docker-tutorial.html
docker常用命令 https://www.cnblogs.com/DeepInThought/p/10896790.html
rpm查看某个包的具体安装路径 https://blog.csdn.net/jsloveyou/article/details/94601163
数据卷 https://www.imooc.com/article/26316
docker部署vue https://www.jianshu.com/p/3771b155283b
centos安装node的两种方式 https://blog.csdn.net/lu_embedded/article/details/79138650

上一篇下一篇

猜你喜欢

热点阅读