docker打包前端项目

1、打包前端项目

npm run build
# or use yarn
yarn build

2、创建nginx配置文件default.conf

server {
    listen 80;
    server_name localhost;

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

3、创建Dockerfile文件

# 指定使用最新的nginx源
FROM nginx:latest
# 将dist目录拷贝到nginx目录下
COPY ./dist /usr/share/nginx/html/
# 使用default.conf覆盖默认的配置
COPY ./default.conf /etc/nginx/conf.d/
EXPOSE 80

4、打包项目为镜像

# -t： 表示指定需要创建的镜像名 .: 表示Dokerfile文件所在目录
docker build -t username/imagename:tag .
# forexample
docker build -t yuehong/dockervite:1.0.0 .

5、查看本地是否有新的镜像

docker images

6、测试镜像是否OK

docker run -p 80:80 yuehong/dockervite

浏览器访问能够访问到新的项目

7、将镜像推送至dockerhub

# 登录dockerhub
docker login -u username -P password
# 推送至dockerhub
docker push yuehong/dockervite

8、登录服务器部署前端项目

docker run -p 80:80 yuehong/dockervite