Docker+Nginx部署前端项目

本文参考：https://juejin.im/post/5cce4b1cf265da0373719819
https://www.jianshu.com/p/422b61100273

安装Docker

Windows Docker 安装

安装nginx镜像

docker pull nginx:latest

查看镜像

docker images

部署项目

在根目录创建 Nginx Config配置文件
在项目根目录下创建 nginx 文件夹，该文件夹下新建文件 default.conf：

server {
listen       80;
server_name  localhost;

#charset koi8-r;
access_log  /var/log/nginx/host.access.log  main;
error_log  /var/log/nginx/error.log  error;

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

#error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
} 

该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html，所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。
在根目录创建 Dockerfile 文件

FROM nginx
COPY dist/ /usr/share/nginx/html/ // 注意：一定要run build先创建dist文件夹
COPY nginx/default.conf /etc/nginx/conf.d/default.conf // 注意：文件夹名字一定要和创建的保持一致
                                                       //否则后面创建镜像会出错

image.png

自定义构建镜像的时候基于 Dockerfile 来构建。

1. FROM nginx 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
2. COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下 dist 文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。
3. COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是将 Nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。

基于该 Dockerfile 构建镜像
运行命令（注意不要少了最后的 “.” ）：

docker build -t docker-whale(镜像名) .

-t 是给镜像命名，. 是基于当前目录的 Dockerfile 来构建镜像。

image.png

docker images查看镜像，这时我们的docker-whale镜像就已经创建成功了。

image.png

启动容器

docker run -d -p 3000:80 --name ts_vue docker_whale

docker run 基于镜像启动一个容器
-d 后台方式运行
-p 3000:80 端口映射，将宿主的3000端口映射到容器的80端口
--name 容器名，查看 Docker 进程
查看创建的容器

docker ps

image.png

访问
此时访问 http://localhost:3000 就能访问到该 Vue 应用。