如何将自己的网站部署到阿里云的服务器

3,763 阅读10分钟

购买阿里云服务器(安装ubuntu16.04系统)

登陆阿里云官网阿里云官网购买服务器,普通的预装ubuntu16.04系统即可,一般1核1GB带宽1Mbps的QPS可达1~3万,足够日常使用。在购买前需要填服务器的开机密码,用户名默认为root.当然也可以选择不填密码,买好之后修改。

购买域名并填写域名模板解析域名

  • 首先至万维网选购域名
  • 购买域名解析
  • 阿里云控制台填写域名模板并解析购买的域名,具体操作见云解析帮助文档
  • 比如说我们购买的域名是eljin.xyz,解析到你购买的服务器的ip地址,如果你的网站访问地址为www.eljin.xyz, 则需要在域名解析页面添加一条A记录,具体如图

域名解析

  • 接下来进入备案流程,详情见备案系统(阿里云备案比较繁琐,但是速度比较快,一般10天左右就可以收到审核通过的结果)
  • 最后备案通过审核后即可通过域名访问我们的网站了,当然,你得先把自己的项目跑在自己的服务器上的某个端口并且监听该端口

配置购买服务器的环境(ubuntu16.04)

通过服务器的默认账号root和购买服务器填写的密码登陆服务器,这里我推荐windows系统下使用xshell或者git bashmac或者linux使用自带的终端登陆工具即可,ssh初始默认登陆端口为22

ssh root@ip 输入密码即可登陆

添加个人常用账户fizz

adduser fizz

接下来会提示输入你的一些信息,这时候已经添加了个人普通账户,因为我们在部署项目时候经常会遇到一些权限问题,所以我们需要一个拥有sudo权限的账户,需要给该用户升级权限

sudo gpasswd -a fizz sudo // 将用户添加到sudo权限组

接下来打开/etc/sudoers文件,gedit或者vim都行,这里直接用vim打开,在# Use privilege specification添加fizz ALL=(ALL:ALL) ALL,意思是fizz的所有权限为超级管理员所有的命令对于fizz用户都适用;

sudo visudo 或者 sudo vim /etc/sudoers

注:vim打开的按esc,wq!强制保存,sudo visudo的crtl+X、shift+Y、Enter 依次按下即可保存生效; 退出服务器,使用你创建的账号登陆就可以啦,试试sudo mkdir fizz

本地配置无密码登陆服务器

配置无密码登陆,无非就是在服务器与本地建立一个相互信任的机制,即本地的公钥需要被服务器认可,因此需要把本地的ssh公钥放到服务器的.ssh文件夹的authorized_keys文件中即可;自己电脑本地一般创建了公钥(如果你使用过github的话),因此需要在新买的服务器上并且是你自己刚创建的账户上创建.ssh文件并生成公钥和私钥;

ssh fizz@ip

ls -a看看有没有.ssh文件夹,没有的话sudo mkdir .ssh创建.ssh文件夹;然后生成公钥和私钥;

sudo ssh-keygen -t rsa

注意,一般此时会出现Enter file in which to save the key (/root/.ssh/id_rsa):问你公钥和私钥保存在哪里,你需要填的路径为你刚创建的用户下面,默认是在root账户下,此时你需要在后面打你账户的路径:Enter file in which to save the key (/root/.ssh/id_rsa):/home/fizz/.ssh/id_rsa,即创建好了密钥对。继续创建本地公钥保存在服务器上.ssh文件夹中的文件authorized_keys;

sudo vim authorized_keys

复制本地的公钥至服务器的authorized_keys文件中即可,并且给authorized_keys添加可读可写权限(至少是600)sudo chmod +rw authorized_keys退出服务器重新输入ssh fizz@ip不需要输入密码即可登陆。

本地修改ssh登陆服务器端口

ssh默认的登陆端口为22,为了稍微增加那么点安全性,可以修改下ssh登陆端口成自己定义的端口,范围在0~65535(2^16-1)之内,最好在1000以上的,因此1000以内的很多端口都是某些服务的运行端口,这里定义为10086:

sudo vim /etc/ssh/sshd_config

改成Port 10086即可
注意:修改端口保存之后,重启ssh服务sudo service restart ssh;切记不要直接退出本窗口,再新开一个终端窗口试试能不能登陆:

ssh -p 10086 fizz@ip

如果可以,说明端口修改成功,否则如果修改错误直接退出了,那么服务器就登不上了!!!

本地添加快捷登陆服务器脚本

这里针的是对使用Mac系统或者Linux系统的操作:

  • Mac系统(没装zsh)

sudo vim .bash_profile

  • Mac系统(安装了zsh)

sudo vim .zshrc

  • Linux系统

sudo vim .bashrc

在下面添加: alias fizz="ssh -p 10086 fizz@ip",在终端只需输入别名:fizz 即可登录服务器。

服务器主动开启防火墙ufw和主动防御fail2ban

这一章节主要为了增加服务器的安全性,涉及到运维方面的东西,一般可以做到拦截多次频繁的恶意请求攻击,造成服务器堵塞;只开放某些端口;过滤某些信息等,主要是配置防火墙的规则文件iptables.up.rules,这一节对于初学者部署自己的项目不是必须的,因此可以跳过。当然,我自己也是菜鸟哈哈哈哈😁

防火墙具体配置见;防火墙配置规则
fail2ban安装与使用配置见 如何在Ubuntu 14.04上使用Fail2Ban保护Nginx服务器

服务器安装代理服务器nginx

Nginx官方介绍

Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让 其具有极好的IO性能,时常用于服务端的反向代理和负载均衡

安装过程

sudo apt-get update && sudo apt-get upgrade // 更升级新ubuntu软件安装源
sudo apt-get install nginx // 安装nginx
sudo service nginx start // 启动nginx服务

此时,nginx已经在你的服务器上跑起来了,关于nginx具体的使用操作和配置参数的意义,这里推荐一个教程写得很好,想了解的猛戳一个前端必会的 Nginx免费教程, nginx安装了解完之后,可以开始把你的项目部署到服务器上了!!!

在Nginx上部署静态网站项目

部署一个静态项目很简单,只需要配置相关配置文件载入重启nginx服务器即可

  • 首先登陆服务器ssh -p 10086 fizz@ip
  • 进入nginx的代理配置文件中,cd /etc/nginx/conf.d
  • 创建自己的配置文件,命名自己定义,本人习惯是 网站域名_运行端口.conf,比如 我的网站域名为 fizz.com,并且运行在80端口 => fizz_80.conf; 配置详情如下:

这样配置无论是输入域名还是ip地址,都可以直接访问到~/www/static下面的index.html文件了,注意配置完成了需要检查配置是否正确并重新载入启动nginx服务

sudo nginx -t // 检查配置文件是否符合规则
sudo nginx -s reload // 重新载入配置文件
sudo service nginx restart // 重启nginx服务

当然,你得在你自己的目录下有/www/static/index.html这个文件

cd ~
mkdir www
mkdir static
touch index.html

echo "<!doctype html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /></head><body><p>恭喜你,部署静态项目成功啦~~~</p></body></html>" > index.html => 将内容写入至index.html文件中

在你的浏览器输入你的服务器ip或域名试试,大功告成!!!

在Nginx上布置webpack打包后的前端项目

这个部署流程跟部署静态项目一样,webpack打包编译好线上环境的项目www之后,压缩成tar包,通过scp命令上传至服务器,解压,在conf.d文件夹中配置相应的webfront_fizz_80.conf文件即可,例如:

tar -czvf www.tar.gz www/ // 打包压缩前端项目www
scp -P 10086 www.tar.gz fizz@ip:~/webfront/static // 上传至服务器
ssh -p 10086 fizz@ip // 登录服务器
cd ~/webfront/static // 进入存放的文件夹
tar -xzvf www.tar.gz // 解压缩
sudo chmod +r www // 给项目目录增加访问权限

{
    listen 80;
    server_name webfront.fizz.com;
    location / {
        root /home/fizz/webfront/static/www;
        index index.html index.htm
    }
}

大功告成!!!

在Nginx上布置nodejs后台项目

  • 首先得配置nodejs环境

安装必要的软件

sudo apt-get install wget curl git

由于nodejs版本不同,其功能支持方面也不一样,不同项目可能使用的是不同的nodejs版本,这时候需要使用nvm去管理nodejs的版本,方便在不同版本之间切换,需要安装nvm,安装见 Github地址
安装nvm

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

安装完成之后记得重开一个terminal窗口,登录服务器,可以查看nvm版本了

nvm --version

安装node

nvm install v7.8.0 // 安装7.8.0版本的nodejs
nvm alias default 7.8.0 // 将7.8.0版本nodejs作为默认nodejs版本
nvm use 7.8.0 // 使用7.8.0版本nodejs作为当前nodejs版本

到这里,nodejs环境安装好了

  • 配置nginx的conf文件

这里为了方便,我们将以下的nodejs后台程序部署至服务器

// app.js
const http = require('http');
http.createServer(function(req, res){
    res.writeHead(200, {"Content-Type":"text/html;charset=utf-8"});
    res.end("欢迎访问我的第一个nodejs项目😀")
}).listen(8100, () => console.log("服务已经在8100端口启动")
  • 接下来有两种方式来维护nodejs项目

    • 上传nodesj项目至github/码云托管,保持服务器上的项目与github该项目同步,实现一键更新部署

    • 自己利用scp命令把项目上传至服务器覆盖更新原项目

    两者都需要守护nodejs项目跑在8100端口的进程,这里我们借助PM2来守护nodejs进程。
  • 一键部署更新

    在需要部署的项目中配置ecosystem.json文件,具体配置教程见PM2项目配置教程,具体同步上传教程见PM2项目发布教程;发布成功之后,每次需要与github项目同步更新的话,可以到服务器项目的文件夹中运行:
    git pull
    pm2 restart app.js || pm2 restart AppID /*node项目的启动ID*/
    
  • scp命令上传项目覆盖掉原项目,pm2 start app.js即可

  • Nginx配置文件

    Nginx需要监听客户端的网络请求(一般为80端口),然后将请求转发到服务器(本地)的项目所占用的端口,最后项目接收到请求从而进行响应。基本配置文件如下:
    server {
          listen 80;
          server_name 你的域名;  #客户端访问的域名,如果有多个,用逗号分开
      
          location / {
              proxy_pass http://127.0.0.1:8100;  #映射到代理服务器(本地)ip和端口
              proxy_set_header Host $http_host;
              proxy_set_header X-Real-IP $remote_addr;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              Proxy_redirect off;
         }
      }
    
    重新载入nginx配置文件生效,重启nginx服务即可。最后,整个部署过程结束,这时候访问已经备案好的域名,即可访问到自己部署的nodejs项目了!!!