Loading...
首页专栏正文

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

 
1人已赏
Fizz 发布于 2020-11-26 18:23:10 浏览 7151 点赞 211 收藏 15

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

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

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

  • 使用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

创建Bucket的选项 创建后上传我们的网站资源,

然后设置静态网站托管

设置网站的域名访问,前提是你必须有一个已经备案的域名

在这里插入图片描述

在这里插入图片描述

域名也可以配置HTTPS证书。

设置公共读写权限注意:开启了公共读写后,产生流量后,就会产生额外的流量费,所以不用时一定要及时关闭

一切配置好后,访问域名就能看到网站了,不过有时候域名解析会慢一些。最好等个 十几分钟。

这种方式部署比较省事,也不用重启服务,配置完第一次后,后续直接上传文件就行了。流量的费用可以选择包月的。缺点就是费钱,另外一点就是很多配置都不能配置,比如单页面应用的history路由。

写在最后

部署项目并不是什么难事,只是看你花不花时间去学习。任何一件事都是这样的。

前端架构师,精通前端技术栈,物联网。了解云原生,容器编排。

*本文仅代表作者观点,不代表易百纳技术社区立场。系作者授权易百纳技术社区发表,未经许可不得转载。

精彩评论

  • 途行者阿杜 评论于 2020-11-23 15:11:01

    感谢分享~~

    0
    给我一个支点,让我撬动地球~
内容存在敏感词
打赏
打赏作者
Fizz
您的支持将鼓励我继续创作!
金额:
¥1 ¥5 ¥10 ¥50 ¥100
支付方式:
微信支付
支付宝支付
微信支付
打赏成功!

感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~

易百纳技术社区
确定要删除此文章、专栏、评论吗?
确定
取消
易百纳技术社区