dockerfile 编写前端项目 docker部署前端项目

前言：

最近在使用尤大今年刚发布的脚手架vite2.0搭建的项目练手，打算部署到服务器上玩一玩。

部署

1.克隆自己的项目到服务器上

git clone xxx // xxx是自己的项目仓库地址

此时可以看到已经成功拉取了项目

2. 获取nginx镜像

docker pull nginx

3. 创建 nginx 配置文件

进入项目根目录，在项目根目录下创建文件default.conf，写入如下内容

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。

4. 创建dockerfile文件

在项目根目录下创建Dockerfile文件，写入下面内容

# 该镜像是基于nginx:latest镜像构建的
FROM nginx

# 添加说明
MAINTAINER author: xxxx

# 删除目录下的default.conf文件
RUN rm /etc/nginx/conf.d/default.conf

# 将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置
ADD default.conf /etc/nginx/conf.d/

# 将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下
COPY dist/ /usr/share/nginx/html/

5. 打包生成dist文件

在安装依赖和打包过程中，发现宿主机没有安装 node 和 yarn，于是参考了这篇文章：linux安装nodejs和yarn，安装完之后就可以执行下面步骤了。
安装依赖

npm install // 或者 yarn

构建

npm run build // 或者yarn build

6. 构建docker镜像

docker build -t vite2 .

注意不要少了最后的“.”(点)
-t是给镜像命名，.(点)是基于当前目录的Dockerfile来构建镜像

构建完后可以用 docker images命令查看本地镜像

7. 启动docker容器

docker run -d -p 3000:80 --name vite-demo vite2

docker run：基于镜像启动一个容器

-d：后台方式启动

-p 3000:80: 端口映射，将宿主机的3000端口映射到容器的80端口

--name vite-demo: 容器名

vite2：要启动的镜像名称

启动后可使用 docker ps 命令查看容器是否启动成功

访问

访问宿主机IP:3000 就可以看到我们部署的项目了

简化部署步骤（编写脚本）

在根目录下创建名为 start.sh 的脚本,填入以下代码

#/bin/bash

# 拉取最新代码
git pull

# 安装依赖
yarn

# 构建打包
yarn build

# 停止、删除容器
docker stop vite && docker rm vite

# 构建镜像
docker build -t vite2 .

# 创建容器
docker run -d -p 3000:80 --name vite-demo vite2

这样，每次更新代码之后，只需要 输入 sh start.sh 命令运行脚本，就能部署项目