docker 部署nginx和vue

linux 版本 centos7

部署docker的步骤请自行百度

拉取nginx镜像

docker pull nginx

运行nginx

docker run -d -p 8081:80 nginx

访问nginx（ip:8081）

vue 项目

npm run build

打包产生一个dist文件夹

项目根目录下新增2个文件：default.conf和Dockerfile

default.conf（监听8082端口，即vue项目的启动端口）

server {
    listen       8082;
    server_name  localhost;

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

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

Dockerfile

FROM nginx
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
COPY default.conf /etc/nginx/default.conf
RUN echo 'echo init ok!!'

centos中vue的目录结构

构建vue镜像

docker build -t vue .

启动vue镜像

docker run -d -p 8082:8082 vue

启动成功后访问vue项目即可