老中医手把手带你搭建一个自己的网站

骆飞
1,297 阅读3分钟

前言

前段时间花了1美刀买了一个域名（是的你没听错就是7块钱人民币），一直想挂到自己的服务器上，由于工作原因到了新的环境忙着入职和一些杂七杂八的事情一直没顾得上。这不周末得空，解决一下域名的事，顺便把自己从搭建网站的过程做一个总结，一半分享一半自用。作为一个前端，我相信大部分人都是切图写业务，要不就是死钻框架，来来回回就是自己那一亩三分地。那今天跟着老中医看看别人家的田吧！

Vultr和Bandwagon

这两个都是都是国外出租服务器的两个大平台，稳定也不会跑路，最重要的是都支持支付宝支付，方便。当然那些白嫖谷歌云的和亚马逊的虽然香吧，但是毕竟要绑一个个人的visa信用卡，这里就不推荐了，喜欢的自行百度。Vultr和Bandwagon的区别就是Vultr是按时收费期间你可以随便更换服务器的配置，闲置的时候关闭也就不会收费。Bandwagon的呢就是固定配置按月或者年续费，根据个人使用的体验觉得Vultr无论是网速和服务器质量都要比的好那么一内内。但是就性价比来说我还是选择了Bandwagon，没那么精力在Vultr上开开关关，同配置的服务器开上一年Vultr要比贵上不少

Bandwagon租个服务器-->bandwagonhost.com/

  • 选择匹配自己的服务器配置，个人使用的话我感觉这个一年$49.99（350人民币的就很香）不行就找个人跟你合租，土豪走开好吧。
  • 添加到购物车登录或者注册支付宝进行付款

  • 付款成功后恭喜你，有了自己的服务器啦，之后进入kiwivm 安装自己想要的系统CentOS，Debian，Ubuntu，Fedor都可以，这里我选择Centos7 网络不好抽空给大家把截图补上
  • 安装好之后你的服务器ip端口都会显示的kiwivm面板上了，之后就是用shell工具登录你的服务器，这里要说一点Bandwagon的服务器端口都是修改过的不是默认的22，一定要注意否则登录不了。

Centos中的前端环境

这里就不跟大家啰嗦了，网上有n多教程跟着走就行，常用的git，node.js,pm2等等自己看着来。

关于域名 --> www.namesilo.com/

其实到了上一步，通过node服务或者nginx服务就可以暴露静态资源，建站就完成了，只通过IP:端口号这样访问。别人都是www.xuanku.com,而你是 44.4.4.4:5428 多少显得有点low了吧。但是注册域名要审核备案（起码要个一两周吧），一年还要个几十上百的，一想这么糟心丑点丑点吧，凑合用。今天给大家推荐个namesilo的域名平台，我花了0.99美刀（7块钱）买了一年域名，还不用备案，即买即用，香惨了。

  • 注册登录
  • 选择自己喜欢的域名购买，.xyz的最便宜 有很多都是0.99的
  • 付款后进入后面 选择已购买的域名点进去
  • 进到这一页看到那个小蓝人了吗？点进去！！
  • 域名解析 把列表中默认的那几个都删掉 点击大A添加 hostname你的二级域名，比方说域名是shuaibi.xyz 前缀随便填个woshi 那你下次访问woshi.shuaibi.xyz就能访问到啦。address是服务器ip地址，TTL给个3603, 完成后去吃个泡面。

  • 稍等片刻 在你的电脑终端ping一下域名,如果是这样那就证明你的域名和服务器已经连通了

关于Nginx域名代理ip地址

到了这里我们就有一个难题了 怎么实现 woshi.shuaibi.xyz 访问到 ip+端口号暴露的资源呢？我的思路是使用Nginx代理资源端口，centos安装ngxin:

  • 安装Nginx源
rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
  • 安装Nginx
yum install -y nginx
  • 输入命令：
whereis nginx
  • 看到输出一下代码，Nginx安装成功
nginx: /usr/sbin/nginx /usr/lib64/nginx /etc/nginx /usr/share/nginx

  • 默认路径

    1. Nginx配置路径：/etc/nginx/
    2. PID目录：/var/run/nginx.pid
    3. 错误日志：/var/log/nginx/error.log
    4. 访问日志：/var/log/nginx/access.log
    5. 默认站点目录：/usr/share/nginx/html

  • 常用命令

    //启动：
    nginx
    
    //测试Nginx配置是否正确：
    nginx -t
    
    //优雅重启：
    nginx -s reload
    
    //nginx服务停止
    nginx -s stop
  • Nginx代理配置，打开/etc/nginx/nginx.conf 配置文件直接cv，保存后记得先 nginx -t 检测格式，再nginx -s reload 重启才能生效，不听话服务器爆炸了别来找我赔！
    
    user  nginx;
    worker_processes  1;
    
    error_log  /var/log/nginx/error.log warn;
    pid        /var/run/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    
    http {
      
        include       /etc/nginx/mime.types;
        default_type  application/octet-stream;
    
        log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                          '$status $body_bytes_sent "$http_referer" '
                          '"$http_user_agent" "$http_x_forwarded_for"';
    
        access_log  /var/log/nginx/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        keepalive_timeout  65;
    
        #gzip  on;
    
        include /etc/nginx/conf.d/*.conf;
    
        server {
    
            listen 80;
            server_name www.jackfly.xyz; #代理域名
            proxy_set_header            Host $host; #关键参数 
            location /{
                proxy_pass http://127.0.0.1:3000; #静态资源端口
            }
        }
    }

关于其他的一些事

  • 前端装X记录：我是用node + express 暴露了一下静态页，然后用pm2做进程守护，pm2我就不过多赘述了，前几期文章经常提，可以翻前几期也可以自行百度，上点代码
    //app.js
    var express = require("express");
    var app = express();
    
    // respond with "hello world" when a GET request is made to the homepage
    app.get("/", function (req, res) {
      res.send("hello world");
    });
    var app = express();
    app.use(express.static("public")); //开放静态资源, 恩，一步解决
    app.listen(3000, function () {
      console.log("小网站跑起来啦！！");
    });
    
    //node app.js也能跑，但是不能关闭shell 也不能干其他事了 这就是为啥用pm2
  • 实现思路如图，其实Nginx本身就是一个轻量web服务器,也可以指定资源目录直接暴露，但是学以致用嘛能用的都用上，别时间长不用给忘掉了，别抬杠！

结语

如果你能看到这，相信你一定能从前端到服务器独立搭建一个网站了，其实这套搭建方案还是有很多优点的，服务器和域名都来自外网，性价比高，也不用做繁复的审核备案。自己学习，搭个梯什么的完全够用了。好了，老中医的任务完成了，去装X吧，有交流的抬杠的评论区见！

avatar
文章
阅读
粉丝