docker 部署前端项目

目录

一、准备工作

1、 使用命令 npm run build 生成dist 文件。

2、使用docker 拉取nginx 镜像：docker pull nginx

3、 准备nginx 配置文件：

4、 准备Dockerfile文件

二、 构建docker镜像，运行容器，浏览器访问

1. 构建docker镜像

2. 运行容器

3. 浏览器访问

三、补充说明

1. 删除容器 

2. 删除镜像

3. 进入容器

4. 给nginx容器安装vi 命令

5. 如果出现：403 Forbidden错误，nginx 出现："/usr/share/nginx/html/index.html" failed (13: Permission denied) 

6. 容器重启命令

一、准备工作

1、 使用命令 npm run build 生成dist 文件。

2、使用docker 拉取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;
    }
}

4、 准备Dockerfile文件

FROM nginx
 
MAINTAINER yinhejumin
 
RUN rm /etc/nginx/conf.d/default.conf
 
ADD default.conf /etc/nginx/conf.d/
 
COPY dist/ /usr/share/