前置知识

Nginx 项目运行和打包

安装

安装一个 windows 的 docker 略

查看 docker

Cmd
docker version

使用 docker 启动一个项目
新建项目
npm init vue@latest
然后一路回车给他起名字叫docker-demo-vue
之后

1
2
3

cd docker-demo-vue
npm install
npm run dev

就可以看见项目被运行起来了

运行起来后给项目打包
npm run build

创建 Dockerfile

然后在项目根目录创建 Dockerfile
注意大小写一定不能错而且文件没有后缀
里面的内容后面配置镜像的时候会讲到

拉取 nginx 镜像

之后拉取 nginx 镜像
win+r cmd 打开控制台输入
docker pull nginx
此时会有两种情况

如果没有拉取过 nginx 后面会有条 Status 是 Downloaded newer image for nginx:lastest
如果之前接触过拉过则显示 image is up to date for nginx:lastest

查看镜像

docker images

此时我们找到了 nginx 的镜像 142mb
创建 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   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

配置镜像

打开我们刚刚的 Dockerfile 写入

1
2
3

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

From nginx 的意思是指定该镜像是基于 nginx:latest 镜像而构成的
COPY dist/ /usr/share/nginx/html/ 意思是将根目录下的打包后的 dist 文件夹中的所有文件复制到镜像中对应的目录下镜像中的目录是不会变的
COPY default.conf /etc/nginx/conf.d/default.conf 意思是将 default.conf 替换镜像中的 conf 配置

构建镜像

命令
docker build -t docker-demo-vue .

-t 的意思是给镜像命名
. 是基于当前目录的 Dockerfile 构建镜像
然后继续运行 docker images 查看镜像
docker images

看到目前有两个镜像并且镜像的名字也很清楚大小是 142mb 基本上就是 nginx 的内容

查看端口是否被占用

netstat -a
查看所有的端口
netstat -ano|findstr 3000
找到对应的端口

运行容器

docker run -d -p 3000:80 --name docker-vue docker-demo-vue

-d 表示容器在后台运行
-p 表示端口映射，把本机的 3000 端口映射到 container 的 80 端口（问题：容器运行前怎么知道端口是否被占用怎么看容器内部的端口）
--name 设置容器名
docker-demo-vue 是镜像的名字

查看容器

docker ps

我们就可以看到对应的 docker 容器名字这里 nginx 由于我们没有对他命名所以他是默认的名字
修改容器名字
我们看到上述的 nginx 名字叫做 great_villani 那么对他重命名的方式就是
docker rename great_villani nginx
当然实际开发中肯定是直接在 run 容器的时候就直接命名了
比如
docker run --name nginx -d nginx
关闭容器
docker stop container_name
尝试一下关闭 nginx
docker stop nginx
看到出现一个 nginx 就是关闭成功了