阅读 4381

前端部署项目到服务器

部署项目到服务器之初体验

node.js其实上学的时候学过一些,但是学过的知识全都还给老师了,之后走了前端这条路,不得不拾起node,年前架构师让我部署项目,我一头雾水,之前也没有接触过部署。最后稀里糊涂在同事的帮助下用nginx反向代理了一下,勉强算是部署了。这次因为项目需求,再加上确实也想学习一下部署,同事就把一次小更新的部署交给我了,默默的感谢一波~部署之后发现,往往不是败给了生涩的概念,而是败给了自己内心的恐惧。

写在前面

之前完全没有接触过服务器,对服务器的概念也是一知半解,所以此篇文章适合和我一样的小小小菜鸟观看,望大佬不要嘲笑。首先服务器到底是什么?

服务器

从官方意义上讲,服务器大概分为两类,一类是应用服务器,主要是专注于动态资源,解析代码。前端服务一般基于解析js语言的node.js搭建。常见的有Tomcat,Apache,express等。还有一类是网关服务器,专注于静态资源、代理转发、负载均衡等。例如nginx等。

我对服务器的理解,就是一台可以远程访问的电脑,甚至是一个主机,或者是某台电脑上的某个虚拟机。使用的时候其实就和我们平时用自己的电脑没什么差别。

登录服务器

公司用的是某云的服务器,Linux系统(乘机学习了一波Linux基本操作)首先申请了一个权限,使用密钥方式登录。在命令行输入

ssh name@地址
复制代码

或者是使用可视化的软件进行登录,我使用的是xshell,以为其中的xftp在上传文件时十分方便。软件操作也不麻烦,新建连接,输入地址和端口号,默认22,选择密码方式或者密钥方式。连接就OK了。

找到xftp的标志就可以在本地和服务器之间传输文件了。

打包部署

本次项目是使用vue搭建的,直接执行npm run build打包项目。打包后生成dist文件。使用node.js写一个简单的express来部署项目。

const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'dist')))
app.listen(8080 () => {
  console.log('app listening on port 8080')
})
复制代码

在服务器上把dist文件夹和app.js放在同一目录下,执行node app.js 之后在浏览器打开‘服务器地址’:8080就能成功访问我们的项目啦。

结语

一次比较粗糙的新手部署历程,业务还不熟练,还需要之后多多练手呐~

文章分类
前端
文章标签