PHP Laravel NGINX html css Bootstrap Python Symfony Apache Windows linux jquery Django ASP vanilla Slim vagrant docker Homestead MySQL Redis Git SVN ssh Root vim PhpStorm Pycharm sass less PHP Laravel android html css Vue Angular React NGINX html css Javascript

手把手教你购买、配置、远程连接属于自己的云服务器以及架设简单的个人网站

原创

原创不易 ~ 转载请注明出处哦

在云服务器已经成为趋势的今天,如果你还没有一台属于自己的云服务器,那么你已经out了。

今天我们就要来一起看一下怎么样购买一台低配云服务器以及对云服务器的基本的操作。最终我们将会建立起一个简单的个人网站。

在开始之前,我们需要先补充一点背景知识。世界上绝大多数服务器运行的环境都是Linux系统,例如UbuntuCentOS。当然也有运行Windows系统的服务器,不过一般来说我不推荐使用Windows系统,因为相比起Linux来说,Windows系统所占的资源更多,另外Linux下两款大名鼎鼎的服务器软件ApacheNginx以出色的表现占据了市场上绝大多数服务器软件的份额,所以在相同硬件配置的情况下,Linux系统作为服务器来说,性能会更加优异,所以我们会选取Linux系统来作为我们服务器的运行环境。

那么视我们需要使用云服务器的用途,我们所需要的硬件配置也不尽相同。那么我们该如何选取适合自己的服务器配置呢?为了讲解方便,我们会以阿里云为例进行具体讲解。如果你想按照文章步骤一起操作,可以先在以下链接领取阿里云通用代金券,等我们讲解完配置,购买的时候使用代金券就可以了:

【阿里云通用代金券领取】

根据我的个人经验,运行简单的网络应用,服务器的CPU和内存都不需要很大,毕竟不需要有UI界面的程序,基本上来说只需要一个服务器软件加上一个语言环境就可以了。简单的个人网站,CPU 1核,内存0.5G就足够了,这应该也是阿里云最低的配置。如果你是想搭建一个自用的VPN服务器,那么这个配置也能够满足要求。
搭建VPN服务器详情请参见我写的另一篇文章:

阿里云服务器搭建Shadowsocks Server及使用SwitchyOmega切换代理设置实战教程)。

如果你需要运行不止一个网站,那么在内存上,可能需要增加一点,CPU 1核,内存1G就可以满足基本需求了。我们通常如果觉得有的网站访问起来很慢,是因为带宽和网速及服务器地域的问题,导致连接速度慢,跟服务器的硬件配置没有直接的关系。然而内存0.5G1G在价格上差别并没有太大,综上考虑,我们会选CPU 1核,内存1G来进行讲解。


那么我们这就开始!

首先我们打开阿里云ECS产品首页:

https://www.aliyun.com/product/ecs

点击下方的切换按钮,将页面切换到入门级:
aliyun-ecs-list.png

在最左边的突发性能实例t5下方,点击立即购买,然后我们会跳转到以下界面:
aliyun-ecs-buy.jpg

这里插入一个小知识点:实例(Instance)指的是你按照某个配置购买后运行起来的云服务器,你可以将它看做你将进行操作的对象。我们可以创建多个实例,不过每个实例都是独立的。

第一行计费方式,通常我们采用包年的方式,会有比较大的优惠,而如果你的实例只是偶尔打开测试用,那么你可以考虑按量付费。如果你的实例需要24小时不间断地运行,那么还是使用包年的方式最为划算。

第二行我们可以看到地域选择,意思是机房的物理位置属于哪个片区。推荐选择离你自己或你的网站人群较近的地理位置。这里我选择的是华东2,这样华东地区的人群将会有更好的访问速度(例如上海)。

接下来的一个板块,我们看到的是实例规格,确认一下我们选择的是1 vCPU内存1 GiB。这里你可以尝试选择一下1 vCPU / 0.5 GiB的实例,你会发现其实价格也就少了50块钱的样子。

再往底下看,我们发现还有两个配置版块:
aliyun-ecs-buy-2.jpg

在镜像中,我们选择Ubuntu 16.04 64位版本。Ubuntu是一个享有盛名的Linux系统,稳定,安全,并且有众多的资源支持。
由于18.04 LTS才刚刚出来不久,购买的时候没有办法添加,那么我们还是使用16.04 LTS。如果你的列表中有18.04,那么请选择18.04 64位版本。

镜像后面我反选了安全加固。安全加固其实就是阿里的云骑士和云盾,等于可以随时监测你的服务器数据,运行的软件等等,如果你跑了shadowsocks这类的软件,那么你可能会被监测到。但如果你是新手,那么也可以保留,因为这个服务可以监测异地登陆情况,如果后期有需要再进行卸载。

再往下我们系统盘保留默认的40G,然后底下的时常选择1年,点击下一步:网络和安全组


网络和安全组这一步中,我们保留默认的选项就可以了:
aliyun-ecs-buy-security-groups.jpg


点击下一步:系统配置,我们看到如下配置界面:
aliyun-ecs-buy-root-password.png

这一步的配置非常重要,请不要跳过。
首先我们在登陆凭证中,选择自定义密码强调一下,不要选密钥对,如果你用过AWS的云服务器,那你一定知道用密钥对来登陆是非常让人蛋疼的一件事。
在选择自定义密码后,我们发现登陆名锁定了root,没关系,我们只要填写root登陆的密码就可以了。请一定记住你设置的root密码,这个密码将在我们后续ssh登陆我们的云服务器时使用。

实例名称,描述和主机名都可以按你的喜好来填,这个没有影响,只是方便你在后台识别你的实例。

好了,重要的配置我们已经完成,下一步的分组配置没什么用,可以直接跳过,在这里我们直接点击确认订单即可(别担心,确认订单会跳转到一个页面,我们可以最后再确认一下我们的订单详情):
aliyun-ecs-buy-confirm.png

如果你对上面的配置不满意,还可以点击上方铅笔图标跳转到相应的步骤进行修改。我们对所选的配置很满意,所以直接点击确认订单。在确认订单后,我们可以通过常用的支付方式进行付款,完成后,我们就成功地购买了属于我们自己的云服务器。庆祝一下吧!


好了,庆祝完成。我们有了云服务器实例,但是我们还不知道怎么连接它!

我们有两种办法可以接连我们的云服务器。

第一种就是通过阿里云后台进行连接。这种办法的好处是无论你使用的什么系统,你都可以进行后台操作,不受限制。我们来看一下如何进入阿里云后台进行服务器连接。

首先我们访问阿里云ECS控制面板(如果未登陆,请先登陆):

https://ecs.console.aliyun.com/

aliyun-ecs-console.png

接下来,我们点击我的资源里,云服务器后面的1,我们会进入到实例列表页面:
aliyun console ecs list.png

这里我们记录一下IP地址一栏下的公共IP(第二种连接方式需要用到)。

点击右边的远程连接,然后会弹出一个六位数字的远程连接的密码(请把这个密码记录下来,以后使用后台远程连接都需要用到)。点击继续,并输入刚才提示的密码。我们会看到一个登陆界面:
aliyun console connection.png
注意,我们在login后面输入root,点击回车,并输入我们在购买云服务器时为root用户创建的密码。
在输入密码的时候密码默认时看不见的,输入完按回车,如果密码正确,将会远程连接上你的云服务器:
aliyun console connection success.png

接下来,我们就可以进行命令操作了(具体的命令操作我们在后面详述)。


注意: 现在阿里云手机APP上已经有ssh连接云服务器的功能了,如果你临时在外需要连接服务器,那么你直接在阿里云的手机APP里,点击控制台 - SSH工具,然后在右上角添加,选择从我的ECS中选择,然后在连接时,在下方写换使用密码连接的选项即可。


接下来,我们讲解第二种连接办法。

如果你使用的是Linux系统,那么直接打开命令窗口(Terminal)然后继续下面的操作即可。

如果你使用的是macOS系统,那么你需要在程序中找到终端(Terminal),打开后继续下面的操作。

如果你使用的是Windows系统,那么请在以下地址下载Git BashGit Bash类似于Windows下的cmd,不过它集成了ssh,并且可以让我们直接使用Linux格式命令):

https://github.com/git-for-windows/git/releases/tag/v2.18.0.windows.1

下载安装后,我们打开Git Bash

接下来我们在命令窗口输入以下命令来连接我们的服务器:

$ ssh root@your-server-public-ip

请用上一步中你记录下的服务器公共ip替换上面的your-server-public-ip

输入后回车,我们会看到类似以下的提示:

The authenticity of host 'xxx.xxx.xxx.xxx(xxx.xxx.xxx.xxx)' can't be established.
ECDSA key fingerprint is SHA256:1cfOOVFYTVFi6M5jVAvuTqaCiKXRsRgsmhAxxxxx.
Are you sure you want to continue connecting (yes/no)?

这里我们输入yes,按回车,然后我们会被提示输入root用户的密码。输入密码然后按回车,我们就连接上了我们的云服务器:

root@ip's password: 
Welcome to Ubuntu 16.04.3 LTS (GNU/Linux 4.4.0-62-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

Welcome to Alibaba Cloud Elastic Compute Service !

Last login: Fri Jul 20 11:58:01 2018 from xxx.xxx.xxx.xxx
root@xxx:~#

激动吗?别着急,我们才刚刚连接上服务器,接下来,我们要来安装Nginx,并使用Nginx来假设一个简单的个人站点。


如果你好奇为什么我选的是Nginx而不是Apache,原因是Apache虽然占据了极大的市场份额,但是Nginx以其优异的性能正在被越来越多的公司和个人使用,并且Nginx在配置文件中的条理会更加清晰。

那么我们开始。首先我们需要连接上我们的云服务器,然后输入以下命令

$ sudo apt-get update

完成后,我们安装Nginx

$ sudo apt-get install -y nginx

安装完成后,我们来看一下Nginx有没有运行:

$ sudo systemctl status nginx

● nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Fri 2018-08-10 13:37:23 CST; 3 weeks 3 days ago
  Process: 25396 ExecStop=/sbin/start-stop-daemon --quiet --stop --retry QUIT/5 --pidfile /run/nginx.pid (code=exited, status=0/SUCCESS)
  Process: 25403 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
  Process: 25400 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
 Main PID: 25406 (nginx)
    Tasks: 3
   Memory: 14.6M
      CPU: 7min 30.218s
   CGroup: /system.slice/nginx.service
           ├─25406 nginx: master process /usr/sbin/nginx -g daemon on; master_process on
           ├─25407 nginx: worker process                           
           └─25408 nginx: worker process                           

Aug 10 13:37:23 iZuf66h25ghj5n832ovuk8Z systemd[1]: Starting A high performance web server and a reverse proxy server...
Aug 10 13:37:23 iZuf66h25ghj5n832ovuk8Z systemd[1]: Started A high performance web server and a reverse proxy server.

可以看到Active: active(running)表示服务已经成功运行了。如果你显示的不是active,请尝试重启Nginx

$ sudo systemctl restart nginx
$ sudo systemctl status nginx

确认Nginx正常运行后,我们就可以进行下一步了。

现在我们打开浏览器,在地址栏输入我们服务器的公共ip然后回车,我们会看到类似以下界面:
nginx_default.png

这说明nginx已经正常工作了。

现在我们需要将这个页面替换成我们的个人页面。Nginx默认的网站页面存放在/var/www/html文件夹中,而我们希望使用自定义的文件夹来存放我们的站点文件。

首先我们进入/var/www文件夹,将里面的html文件夹删除:

$ cd /var/www
$ ls
$ rm -r html

接下来,我们创建一个文件夹:

$ mkdir mysite

完成之后,我们在mysite文件夹下,新建一个html页面:

$ touch index.html

我们希望nginx加载我们刚刚创建的html页面,所以我们需要修改一下默认的nginx参数:

$ cd /etc/nginx/sites-available
$ ls

# 先备份一下default配置文件
$ cp default default.bak

# 开始修改default配置文件
$ nano default

我们看到,default文件内容大致如下:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~ /\.ht {
        deny all;
    }
}

我们需要把root后面的路径修改成我们刚才新建的文件夹路径:

 root /var/www/mysite;

接下来我们按ctrl + x然后回车保存退出。在重载nginx前,我们需要先测试一下配置语法是否有错误:

$ sudo nginx -t

如果没有显示错误,那么我们就可以重载nginx配置了:

$ systemctl reload nginx

nginx配置重载完成后,我们就可以给我们的页面填充内容了!

将以下内容复制以下到/var/www/mysite/index.html中:

<!DOCTYPE html>
<html>
    <head>
        <title>This is my first website!</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand" href="#">Eagle</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Resume</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Playhouse
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Toys</a>
                            <a class="dropdown-item" href="#">Computers</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Animals</a>
                        </div>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>

        <div class="container pt-5 mt-5">
            <div class="jumbotron">
                <h1 class="display-4">欢迎访问我的网站!</h1>
                <p class="lead">如果你喜欢我的文章,请给我留言或点赞</p>
                <hr class="my-4">
                <p>想更多地了解我吗?</p>
                <a class="btn btn-primary btn-lg" href="#" role="button">查看我的简历</a>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

保存后,我们打开浏览器,输入我们服务器公共ip,然后就可以看到我们自己创建的页面了!
my-first-website.png

现在你可以尽情庆祝了:)!


下一步你可以尝试挑战:

  1. 完善我们的个人网站,加入你的简历等信息,并发送给你的好友
  2. 使用简单的后端脚本语言(例如PHP),动态输出页面
  3. 使用简单的Javascript给页面做一个动态效果
  4. 使用Bootstrap 4给网站进行布局

正在加载验证码......
请先完成验证
2019-01-28 19:02:17 1142450337@qq.com
罗哥,我是个小白,不会git的基本命令,例如创建新文件,所以照着教程里的步骤走也有些困难,请问哪里可以学到git的基本操作呢?
2019-01-31 12:43:25 eagle.luo@foxmail.com 回复 1142450337@qq.com
抱歉回复得迟了些,其实你不需要知道git命令也可以操作,如果按照教程里的步骤走,你需要知道一些基本的linux操作命令,比如cdls等等,因为我们的服务器环境用的是Ununtu,也属于Linux,所以你可以在网上学习一些常见的linux系统操作命令,或者你根据我文章步骤走的时候,边进行边查也是可以的。
2018-10-29 08:19:59 735353255@qq.com
罗哥,网站需要一个留言板的功能!
2018-10-29 14:59:22 492617424@qq.com 回复 735353255@qq.com
评论就够了😂