docker部署项目(vue/react/node/web......)

docker 项目部署

我默认你已经安装了 docker 儿～

先说一下，下面执行可能会遇到的问题。

1. Permission denied
   运行shell报错：Permission denied 意思就是没有权限。
   使用命令：chmod 777 ***name***.sh ，修改该文件***name***.sh 的权限，然后再执行上面第二步的操作即可。

2. bash: vi: command not found 这是因为vim没有安装。
   使用如下命令安装：

apt-get update
apt-get install vim

---

附一个docker部署web项目的参考demo

https://github.com/yaodongyi/web-page

---

配置react，vue，web打包脚本

./build.sh 运行入口，可以在package.json上配置script: { docker_build: “./build.sh” }

#!/usr/bin/env bash
set -e
pwd=$PWD 
 
function buildImage(){
    version=`awk '/"version":/{gsub(/"|,/,"",$2);print $2;exit;}' ${pwd}/package.json`
    rm -rf dist # 删除当前目录下的dist 
    rm -rf ${pwd}/docker/dist # 删除docker下的dist
    npm run build # 重新构建
    cp -r ${pwd}/dist ${pwd}/docker/dist # copy到docker 
    dockerImage=web-page-$1:${version} # 镜像名称 注意：web-page对应package.json的name。
    docker build ${pwd}/docker/ -t ${dockerImage} --build-arg DIST_DIR=/dist # 构建镜像，指定DIST_DIR变量
}
cnpm install
buildImage webpage # 传入的$1参数
docker-compose -f docker-compose.yml up -d # 运行compose	

./docker-compose.yml

version: '3.1'
services:
  webpage:
    image: web-page-webpage
    restart: always
    ports:
      - 1234:80 # 端口映射

配置Dockerfile ./docker/Dockerfile

FROM nginx # 构建nginx基础镜像
ARG DIST_DIR
COPY ${DIST_DIR} /usr/share/nginx/html # 复制DIST_DIR目录到docker内的/usr/share/nginx/html

然后运行 ./build.sh 即可打包生成docker镜像。
以上适用于react，vue，web项目。
可以通过docker ps查看是否已经运行起来了。

---

node项目部署

./Dockerfile

FROM node:alpine # 构建node基础镜像
ARG DIST_DIR
COPY . /usr/share/nginx/html # 将当前目录内容 复制到docker中的/usr/share/nginx/html 

./build.sh

#!/usr/bin/env bash
set -e
pwd=$PWD 
 
function buildImage(){
    version=`awk '/"version":/{gsub(/"|,/,"",$2);print $2;exit;}' ${pwd}/package.json`
	npm run build # 重新构建一下
    dockerImage=with-typescript-$1:${version} # ${version}为package.json的版本号
    docker build ${pwd} -t ${dockerImage} --build-arg DIST_DIR=/ # docker build 构建镜像
    
    # 查看进程是否存在
    if [ `docker inspect --format '{{.State.Running}}' with-typescript_$1_1` == "true" ]; then
        docker restart with-typescript_$1_1 # 更新代码同时重启容器
        echo " ---> 重启docker容器，容器名称：with-typescript_$1_1"
        echo y | docker image prune # 清除空,废弃镜像
    else
        echo " ---> 首次编译，容器名称：with-typescript_$1_1"
    fi
}
cnpm install # 每次打包前重新拉一下npm i 避免更新npm包没拉到
buildImage next_app 
docker-compose -f docker-compose.yml up -d # 运行docker-componse

./docker-compose.yml

version: '2'
services:
  next_app:
    image: with-typescript-next_app
    # build: .
    working_dir: /usr/share/nginx/html # 启动的工作目录
    volumes:
      - .:/usr/share/nginx/html
      # - ./node_modules:/usr/share/nginx/html/node_modules # 如果是使用挂载node_modules 可以打开此行代码
    ports:
      - '8080:8080'
    command: 'npm start'
    restart: always

然后运行 ./build.sh 即可打包生成docker镜像。
以上适用于next/nuxt/自己搭建的node项目。

---

docker 命令

对于docker命令做一下常用的收集。

进入容器：

docker exec -it 容器ID /bin/bash 

退出容器

exit

查看容器/镜像

docker ps # 查看正在运行的容器
docker ps -a # 查看所有容器
docker image # 查看镜像

启动容器

docker start <CONTAINER ID|NAME> 
docker start $(docker ps -a | awk '{ print $1}' | tail -n +2) # 启动所有的容器

关闭容器

docker stop <CONTAINER ID|NAME>
docker stop $(docker ps -a | awk '{ print $1}' | tail -n +2) # 关闭所有的容器

删除容器

docker rm <CONTAINER ID|NAME> <CONTAINER ID|NAME>
docker rm $(docker ps -a | awk '{ print $1}' | tail -n +2) # 删除所有的容器

删除镜像

docker rmi <REPOSITORY|IMAGE ID> <REPOSITORY|IMAGE ID>
docker rmi $(docker images | awk '{print $3}' |tail -n +2) # 删除所有的镜像

清理长期未使用镜像

docker image prune