Docker——nginx部署vue项目

docker使用 nginx 部署vue项目的两种方式

1、docker 安装 nginx

一、docker search nginx

MacBookPro:share wuxi$ docker search nginx
NAME                              DESCRIPTION                                     STARS               OFFICIAL            AUTOMATED
nginx                             Official build of Nginx.                        12049               [OK]                
jwilder/nginx-proxy               Automated Nginx reverse proxy for docker con…   1671                                    [OK]
richarvey/nginx-php-fpm           Container running Nginx + PHP-FPM capable of…   742                                     [OK]
linuxserver/nginx                 An Nginx container, brought to you by LinuxS…   79                                      
bitnami/nginx                     Bitnami nginx Docker Image                      71                                      [OK]
tiangolo/nginx-rtmp               Docker image with Nginx using the nginx-rtmp…   57                                      [OK]

二、docker pull nginx

MacBookPro:share wuxi$ docker pull nginx
Using default tag: latest
latest: Pulling from library/nginx
b8f262c62ec6: Pull complete 
e9218e8f93b1: Pull complete 
7acba7289aa3: Pull complete 
Digest: sha256:aeded0f2a861747f43a01cf1018cf9efe2bdd02afd57d2b11fcc7fcadc16ccd1

docker run -d -p 8088:80 --name wxnginx-vue-dist -v ~/Documents/docker/vue-dist/dist:/usr/share/nginx/html nginx

将本地Vue项目 打包以后，dist文件下的文件后目录挂在容器默认路径下，这样项目持续构建就能够了

2、Dockerfile制做镜像替换容器内部文件

vue项目下新建Dockerfile文件，编辑以下内容

# 设置基础镜像
FROM nginx
MAINTAINER wuxi
COPY dist/  /usr/share/nginx/html/
RUN echo 'copy vue-buid-dist to nginx path'
#COPY nginx.conf /etc/nginx/nginx.conf
#RUN echo 'replace the nginx.conf'

docker build -t="nginxfile" .

MacBookPro:vue-admin wuxi$ docker build -t="nginfile" .
Sending build context to Docker daemon  209.3MB
Step 1/4 : FROM nginx
 ---> f949e7d76d63
Step 2/4 : MAINTAINER wuxi
 ---> Running in 81d0c0af1164
Removing intermediate container 81d0c0af1164
 ---> a2147d439604
Step 3/4 : COPY dist/  /usr/share/nginx/html/
 ---> 933572553e0b
Step 4/4 : RUN echo 'copy vue-buid-dist to nginx path'
 ---> Running in 1e78ef94e546
copy vue-buid-dist to nginx path
Removing intermediate container 1e78ef94e546
 ---> 3e3129bb9336
Successfully built 3e3129bb9336
Successfully tagged nginfile:latest

 查看镜像

MacBookPro:bin wuxi$ docker images
REPOSITORY                                                     TAG                 IMAGE ID            CREATED             SIZE
nginfile                                                       latest              3e3129bb9336        5 minutes ago       129MB

 启动容器：

docker run --name wxnginxfile -p 8087:80 -d nginfile

打开浏览器测试ok

http://localhost:8087