docker部署vue前端

1.下載安裝nginx image

docker pull nginx:latest

2.准備將編譯后的代碼上傳到主機上

 

 

 

3.編寫dockerfile, nginx conf,並創建鏡像

Dockerfile

FROM nginx:latest
MAINTAINER hzh

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

COPY www/  /var/www/frontend/

default.conf

server {
   listen       80;
   server_name  localhost;
   charset      utf-8;
   root   /var/www/frontend/dist/;
   index  index.html;
   error_page  404 = /index.html;
}

也可這樣寫

server {
　　listen 80;
　　server_name localhost;
　　charset utf-8;
　　error_page 404 = /index.html;

　　location / {
　　　　root /var/www/frontend/dist/;
　　　　index index.html index.htm;
　　}
}

 

在此目錄下執行生成鏡像

docker build -t hzh/mapboxvue:v1 .

4.運行容器

docker run --name ngintest -p 80:80 -d hzh/mapboxvue:v1