解放运维小哥哥,带你自己上 Linux 部署前端项目

本文主要讲不使用 nginx 如何部署前端项目,静态页面和 node 的项目同样适用。下面的介绍中,暂时先没有使用到 jenkins 去进行自动部署,就是自己登录服务器进行操作的步骤。

本文可以让你学到什么

写这篇文章的目的是让新手可以自行登录服务器进行前端项目部署,不需要依赖运维和后端,毕竟大家时间都有限,自力更生很重要。

具体操作步骤

登录服务器

前提是你要有一台可以登录的服务器哦,这个可以和你的运维小哥哥申请,申请完成后,主要有三项东西比较重要,用户名密码服务器的 ip 和端口号

在 Mac 上可以直接使用命令行操作,window 上需要有登录虚拟机的工具,这个自行百度吧,网上有很多。下面你看到的操作和截图都是在 Mac 上进行。

在 iTerm2 中输入一下命令进行服务器的登录操作:

ssh username@ip:port
# username 是你登录服务器的用户名
# ip 是机器的ip
# port 是机器的端口号

接下来会让你输入密码,输入完成之后就登上自己的服务器咯。你肯定会想,如果后续每次登录都需要输入密码,是不是很烦,我们可以配置一个免密登录,后续就方便很多了,具体配置免密可以参考我之前写的一篇文章。传送门

安装 node

服务器部署前端项目,node 是必须的,安装的步骤也很简单,直接参考菜鸟教程即可,相信大家按照步骤操作,肯定是没啥问题的,记得要选择好你 linux 的系统,有的是 Ubuntu,有的是 CentOS。

上传项目

我们在登录到服务器上之后,进入到自己想要存放项目的目录,然后将自己的项目上传到服务器上。前面我也提到了,我们这篇文章暂时不使用 jenkins 自动部署,所以需要我们自己将项目进行上传,我们可以使用 git 把项目拉下来,也可以使用 linux 命令将本地项目上传到服务器上。

这里推荐使用 git,方便快捷,就和你本地拉 git 项目是一样的,如果想知道怎么将本地文件上传到服务器上,可以看一下我之前写的Linux 常用命令,使用 scp 的方式即可。

使用 git 拉取项目,你可以先在你的机器上使用 git --version 查看是否有 git,并且版本是多少,如果有,可能是 linux 自带的,如果没有,可以根据 git 如何安装去进行操作。

linux 自带的 git 在拉取项目的时候,可能会出现以下错误:

The requested URL returned error: 401 Unauthorized while accessing

这个是因为 git 的版本太低了,我们将 git 的版本进行升级即可,具体操作如下:

  • 安装依赖
yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel asciidoc
yum install  gcc perl-ExtUtils-MakeMaker
  • 卸载老版本
yum remove git
  • 下载新版并解压安装
wget https://github.com/git/git/archive/v2.2.1.tar.gz
tar zxvf v2.2.1.tar.gz
cd git-2.2.1
make configure
./configure --prefix=/usr/local/git --with-iconv=/usr/local/libiconv
make install
echo "export PATH=$PATH:/usr/local/git/bin" >> /etc/bashrc
source /etc/bashrc
  • 再次查看 git 版本
git --version

输出 git 版本说明安装成功了。

git version 2.2.1

再次拉取代码就可以成功了。

使用 pm2

前面也说了,我们暂且不讨论使用 nginx,先使用 pm2 进行服务的管理。

列举一下 pm2 的主要特性吧,方便大家了解:

  • 0 秒停机重载,自动重启
  • 内建负载均衡
  • 停止不稳定的进程
  • 性能监控
  • 错误日志

我们这里主要使用 pm2 运行服务,其他功能,大家可以下去慢慢了解。

安装 pm2

npm i -g pm2

安装完成之后使用 pm2 -v 查看版本号,这个时候可能又会有问题,就是提示 pm2 的命令不存在,如下:

bash: pm2: command not found

如果你的服务器没提示这个错误,恭喜你,避免了一个大坑,如果出现,也不必紧张,我教你怎么解决。

这个是因为软连接的问题,我们安装其他的 npm 全局包也会出现同样的问题,配置一下环境变量就可以了。

# 用一个通用的命令配置环境变量
~$ echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc

# 上面的命令中使用 npm prefix -g 获取node安装目录

# 再执行命令
~$ pm2 -v
3.5.1

这个时候就解决 node 软连接的问题了,后续安装其他的 npm 包也不会有问题了。

pm2 常用命令

既然使用了 pm2,那我们就要知道一些它常用的命令,比如跑服务,终止服务,查看日志。

  • 启动服务
pm2 start app.js --watch
  • 查看当前服务列表
pm2 list

  • 重启
pm2 restart app_name || pid
  • 停止
pm2 stop app_name || pid
  • 查看某个进程的信息
pm2 show app_name || pid

会出现你服务的详细信息:

  • 查看日志
pm2 log app_name | pid

具体可以跑一个服务起来,然后查看一下试试。

启动服务

node 服务

服务器上目前已经有 node,npm,pm2 和我们自己的项目了,这个时候进入到项目里边去,执行安装依赖,启动服务即可。

npm install

pm2 start app.js --watch

这只是一个简单的例子,真正的项目,可能会存在启动脚本以及项目中会有 pm2 的配置文件,这个要具体看你的项目,本文主要是帮助新手了解项目的部署,想要详细了解可以后续关注我的掘金及公众号或者自行搜索解决。

前端静态页面

如果是前端静态页面,我们想要在服务器上跑一个服务,不使用 nginx 的话,可以用 pm2 配合 http-server 进行服务的启动。

pm2 start http-server --name my-file-server -- -p 8080 -d false

如果提示你 http-server 不存在的话,可以使用以下命令重新操作:

which http-server
# 会输出http-server的目录,如 /usr/bin/http-serve

# 接下来在使用http-server时,把目录补上即可
pm2 start /usr/bin/http-server --name my-file-server -- -p 8080 -d false

这个时候你就可以根据 服务器的ip:port/xx 去进行访问了。

其他问题

当你的服务启动成功后,在浏览器可能会被限制访问,这个时候你可以在服务器上使用 curl xxx 去进行访问,如果服务器访问没问题,那可能是因为服务器对于端口号没有开放,或者有防火墙,去搜索引擎一搜索都是解决办法。

收获

本文主要是实战篇,帮助对项目部署不是很熟悉的小伙伴了解项目部署,如果你有自己的服务器或者之前操作过,那这些可能对于你来说是小 case,如果你没进行过以上的操作,希望你可以去腾讯或者阿里云买个服务器,也可以和自己公司运维申请一下测试环境自己部署,去实战一下,毕竟学习了一定要实践之后,才能发现问题在哪,才能记忆更深刻。

希望本文对你有帮助,后续还会出一些比较深入的实战篇,大家可以关注我的掘金和公众号,有更新第一时间推送。

阅读完后两部曲

  1. 非常感谢各位花时间阅读完,麻烦各位动动手指,点个赞,分享一下,您的鼓励是我前进的动力。
  2. 顺便希望各位关注一下我的公众号,新的文章第一时间发到公众号,公众号主要发一些个人随笔、读书笔记、还有一些技术热点和实时热点,并且还有非常吸引人的个人自费抽奖活动哦~

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

石燕平_Leo

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者