前端vue打包成docker镜像启动(使用nginx服务)

 

 

首先创建一个nginx配置文件，这个文件后面会替换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 =404;
    }

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

 

创建Dockerfile文件

FROM nginx

MAINTAINER “作者/维护者姓名”

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

 

如果用docker-compose启动的话，

docker-compose.yml

services:
  vue:
    build:
      context: .  #Dockerfile 所在目录
      dockerfile: Dockerfile 
    image: vue  #镜像名称
   # restart: unless-stopped
   # network_mode: "host"
    privileged: true
    container_name: vue
    volumes:
      - /logs:/logs
    ports:
      - 8080:80

context: .  :这表示当前目录，也就是说Dockerfile和docker-compose在同一目录，

上面这个可以根据自己的来 ，我上面是映射了8080端口出来，所以访问是localhost:8080，docker内部之所以是80 ,是因为我们上面的nginx配置文件我们监听的是80端口

 

目录结构为

 

 

最后执行

docker-compose build
docker-compose up -d

 

启动成功后，访问 localhost:8080（这个是服务器内部访问，外部需要自己修改ip地址）