部署前端项目的几种方案并探讨优缺点_专栏

前端部署作为大前端的知识体系的一部分，是不可或缺的。如果作为软件开发工程师的你开发了一个网站，却不会部署上线，还有请别人帮忙，那知识面确实要扩充下了。而且作为一名前端开发，避免不了与运维部署的同事调试部署流程，如果自己能知道一点前端部署的知识，那合作起来将事半功倍，

本文不会讲很复杂的项目运维配置，点到为止，既能让你快速了解部署的整个流程，又能让你能够毫不费力地部署自己的网站。作为一名前端，一定要知道自己工作内容的上下游是如何流转的,并且掌握一整套的软件开发流程。

前端部署的方式大致有三种，

使用Nginx，Tomcat，IIS等web服务器软件部署
Dokcer容器部署
OSS+CDN 部署，还有叫OBS,COS

下面让我来给大家一一讲解一下。

使用Nginx在单台服务器上部署

Nginx 是一个高性能的HTTP和反向代理web服务器，很多运维大佬都使用使用它来部署项目。使用Nginx部署项目，必须在服务器上安装Nginx，点击这里下载Nginx,如果觉得在服务器上下载，安装Nginx比较麻烦，这里有一个非常简单的办法来安装Nginx，那就是使用Docker。只需要几条命令安装好Docker，执行下面的代码就能安装运行一个Nginx

docker run -d -p 80:80 nginx

安装好只是第一步，现在我们将编译后的前端项目部署到刚刚安装的Nginx中，这里需要用到Docker的目录挂载，Docker的容器像一个黑盒子，我们需要使用目录挂载，将容器外的目录，即宿主机的目录映射到容器内部，让容器能够拿到目录中的内容。

假如你编译后的目录前端资源，存放在/home/fizz/dist,只需要稍微修改一下上面的命令就能够将项目部署起来。

docker run -p 80:80 -v /home/fizz/dist:/usr/share/nginx/html nginx

容器启动后，访问 http://localhost。要注意一下，当前用户必须要有/home/fizz/dist目录的权限。

以上就是使用nginx部署前端项目的整个过程，这是最简单的，再复杂一点，就是使用nginx配置文件部署项目

在简单介绍一下使用配置文件部署

在/home/fizz/nginx/config目录下创建 fizz.conf 注意结尾必须是 .conf结尾。

文件中写入

server {
    listen  8080;
    location / {
        root   /usr/share/nginx/html/fizz;
        index  index.html index.htm;
    }
}

如此一来我们的启动命令就这样了

docker run -p 8080:8080
  -v /home/fizz/nginx/config:/etc/nginx/conf.d
  -v /home/fizz/dist:/usr/share/nginx/html/fizz
  nginx

如果要配置https，也可以在fizz.conf中配置

Dokcer容器部署

使用Docker容器部署项目是最方便，最快捷的一种方式。但前提是一定要有一点Docker的知识，知道如何挂载目录，设置环境变量，等基本操作，如果还不会用Docker，点击这个链接就可以开始学习起来了。当初我学Docker要就花了3天时间。
如果用Docker去部署项目的话，首先将项目制作成Docker镜像，然后上传到Docker的仓库，这个仓库可以是官方的Docker Hub，也可以是自建的Harbor，也可以是阿里云的容器管理平台。然后在服务器上使用docker run ... 就能将项目跑起来。

让我们一步一步来，我们已一个使用vue-cli创建的标准项目来说，如果要将这个项目制作成一个镜像，首先我们要在项目根目录创建一个Dockerfile的文件。
内容如下

FROM node:latest as builder
WORKDIR /app
COPY package.json .
RUN npm install --registry=http://registry.npm.taobao.org
COPY . .
RUN npm run build

FROM nginx:latest
COPY --from=builder /app/dist /usr/share/nginx/html

这个文件定义的内容是如何构建镜像，里面的语法都是很通俗易懂的，即使看不懂也没关系，直接将文件复制到根目录即可。这里我稍微解释一下构建命令的意思，
首先是使用nodejs的基础镜像，去安装node的依赖包，安装后，进行npm run build 最后将编译出的dist目录复制到nginx的镜像中
定义好Dockerfile文件之后，我们就可以使用Docker命令来build一个镜像了，使用下面这条命令就能够builde一个名叫myImageName的镜像。

docker build -t myImageName .

如果不确信是否编译成功，可以运行docker images来查看本地是否有该镜像。

有了镜像之后，我们就可以直接run了，

docker run -d -p 8080:80 myImageName

这样就能运行成了。如果你要将镜像推送到镜像仓库，就要使用docker tag ... 改成相应的名字，然后使用docker login ... 登录到远程仓库，最后使用docker push ...推送。

使用Docker部署不仅方便，而且能够使资源有效利用，保证环境的一致性。

OSS+CDN 部署

如果你的项目对资源加载速度有很高的要求，你们OSS+CDN的部署方式将是一个非常好的选择。
OSS是指阿里云的对象存储，用于存储静态资源，如html，js，css，图片，文件。开启CDN后，可以进行全球节点的加速，而且支持版本控制，网站托管。有些云厂商并不叫OSS,华为云的叫做OBS,腾讯云的叫做COS，其实都是同一个东西。这里以阿里云的OSS为例，给大家操作一些使用OSS部署网站。
首先需要开通OSS服务，购买存储空间，这个费用很便宜，几块钱就能买十几G,半年的。
点击这里就可以购买

买了之后进入OSS控制台，创建Bucket，
OSS控制台创建Bucket