在Linux虚拟机上使用docker部署前端vue项目

1.将写好的vue项目打包

npm run build

打包完成后项目根目录多出来一个dist文件夹

2.nginx安装配置

Nginx 是一个高性能的 HTTP 和反向代理服务器，此处我们选用 Nginx 镜像作为基础来构建我们的vue应用镜像。
2.1获取 Nginx 镜像

docker pull nginx

• Docker镜像（Image）一个特殊的文件系统。Docker 镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。镜像不包含任何动态数据，其内容在构建之后也不会被改变。
• Docker 镜像相关操作有：搜索镜像，docker search [REPOSITORY[:TAG]]；拉取镜像，docker pull
  [REPOSITORY[:TAG]]；查看镜像列表，docker image ls；删除镜像，docker image rm
  [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]] 等等。
• Docker 镜像名称由 REPOSITORY 和 TAG 组成 [REPOSITORY[:TAG]]，TAG默认为 latest。
  2.2创建文件 nginx.conf

#user  nobody;
worker_processes  1;
  
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
  
#pid        logs/nginx.pid;
  
  
events {
    worker_connections  1024;
}
  
  
http {
    include       mime.types;
    default_type  application/octet-stream;
  
    #access_log  logs/access.log  main;
  
    sendfile        on;
    #tcp_nopush     on;
  
    #keepalive_timeout  0;
    keepalive_timeout  65;
  
    #gzip  on;
  
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  云服务器ip地址;
  
        #charset koi8-r;
  
        #access_log  logs/host.access.log  main;
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
 
    }
  
}

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

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.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/nginx.conf 命令的意思是将 Nginx目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 nginx.conf配置来替换 Nginx 镜像里的默认配置。
  将这几个文件上传到服务器上，此处我用的是WinScp
  

2.4基于该 Dockerfile 构建 Vue 应用镜像
切换到目录vue下，执行命令：

docker build -t wordsui .

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

可输入命令：docker images 查看创建好的镜像信息

3.启动 Vue app 容器

3.1基于 wordsui镜像启动容器，运行命令：

docker run -p 8080:80 -d wordsui

• -p 做一个端口暴露
• -d 后台运行
• wordsui 就是我之前打包的镜像名字

成功启动：

3.2可输入命令：docker ps -a 查看容器信息(访问端口，创建时间，容器名称等)

访问ip地址:8080成功启动，大功告成！