在Linux虚拟机上使用docker部署前端vue项目-MyLoo科技网

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

 worker_processes 1;     events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream;  sendfile on;   keepalive_timeout 65;  client_max_body_size 20m; server { listen 80; server_name 云服务器ip地址;   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