使用docker部署网站

[wl05]

docker的使用确实很方便，每一个container都是一个独立运行的环境，关于docker的基础使用方法，网上教程很多，大家自行google。这里主要是记录使用docker部署网站的流程。以部署自己的网站为例。

创建 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 文件

在项目的根目录下创建Dockerfile文件

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

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

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

创建DokcerBash.sh脚本文件

在目录下创建DokcerBash.sh脚本文件。部署的时候我们可以直接运行这个文件帮我们执行一系列的命令，非常的方便。

#!/bin/bash
docker stop ant-vue-blog-front
docker rm ant-vue-blog-front
docker rmi ant-vue-blog-front
docker build -t ant-vue-blog-front .
docker run \
-p 80:80 \
-d --name ant-vue-blog-front \
ant-vue-blog-front

• docker stop ant-vue-blog-front
  docker rm ant-vue-blog-front
  docker rmi ant-vue-blog-front 如果已经有正在运行的container会先停止这个container，然后删除这个container，然后删除对应的镜像。

• docker build -t ant-vue-blog-front . 根据当前目录下的Dockerfile构建镜像。
• docker run -p 80:80 -d --name ant-vue-blog-front ant-vue-blog-front。 docker run 基于镜像启动一个容器
  -p 80:80 端口映射，将宿主的80端口映射到容器的80端口
  -d 后台方式运行
  --name 容器名

运行脚本：

# 先打包代码
$ npm run build
# 然后执行脚本
$ sh  DokcerBash.sh 

执行完成后我们可以通过docker ps就可以看到我们启动的容器了。现在我们可以通过宿主机的ip地址访问到我们的网站了。

遇到的问题

现在网站可以访问了，但是我访问过程中发现在非根目录的路由下刷新页面，会出现404的情况，既然404肯定是因为当前访问资源不存在，那说明路由配置不对。修改nignx配置文件

location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html last;
    }

完整的配置文件如下：

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;
        try_files $uri $uri/ /index.html last;
    }

    #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;
    }
}

参考文章

1. [手把手系列之]Docker 部署 vue 项目
2. 关于vue部署到nginx服务下，非根目录，刷新页面404怎么解决？