docker 部署前端项目

144 阅读2分钟

安装docker

一键安装

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

手动安装

卸载已有docker

sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine

设置仓库

sudo yum install -y yum-utils \
  device-mapper-persistent-data \
  lvm2

设置源

#官方源
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

#清华大学源
sudo yum-config-manager \
    --add-repo \
    https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/centos/docker-ce.repo
    

安装docker ec开发版

#最新版
sudo yum install docker-ce docker-ce-cli containerd.io docker-compose-plugin

#指定版
yum list docker-ce --showduplicates | sort -r

docker-ce.x86_64  3:18.09.1-3.el7                     docker-ce-stable
docker-ce.x86_64  3:18.09.0-3.el7                     docker-ce-stable
docker-ce.x86_64  18.06.1.ce-3.el7                    docker-ce-stable
docker-ce.x86_64  18.06.0.ce-3.el7                    docker-ce-stable

#eg:docker-ce-18.09.1
sudo yum install docker-ce-<VERSION_STRING> docker-ce-cli-<VERSION_STRING> containerd.io


启动docker

sudo systemctl start docker

删除docker

yum remove docker-ce
#删除镜像、容器、配置文件等内容:
rm -rf /var/lib/docker

配置vue项目

拉取代码

yum install git
git clone

配置nginx

在代码根目录创建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;
  }
}

配置dockerfile

在根目录新建Dockerfile文件

FROM node:16.18.0 #导入nginx镜像

WORKDIR /app
COPY package.json /app/
RUN npm install

COPY . /app
RUN npm run build


FROM nginx
COPY --from=0 /app/dist/ /usr/share/nginx/html/
COPY --from=0 /app/nginx/default.conf /etc/nginx/conf.d/default.conf

生成镜像

docker build -t vuenginxcontainer:1 .
# -t 是给镜像命名+版本号 . 是基于当前目录的Dockerfile来构建镜像

启动容器

docker run \
-p 3000:80 \
-d --name vueApp \
vuenginxcontainer

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

docker 命令

  • docker images 查看镜像
  • docker ps 启动的容器
  • docker ps -a 查看所有的容器
  • docker logs 容器名字 查看容器日志
  • docker stop/kill 停止运行中的容器
  • docker rm 容器名字 删除容器
  • docker rmi 镜像名称/镜像id 删除镜像
  • docker save 0fdf2b4c26d3 > hangge_server.tar 导出镜像
  • docker load < hangge_server.tar 导入镜像

参考链接

[手把手系列之]Docker 部署 vue 项目 - 掘金

docker镜像导入导出的两种方法_docker_脚本之家

CentOS Docker 安装 | 菜鸟教程

查看容器的nginx配置