三、建立一個簡單的Web伺服器(以nodejs為例)

基本設定結束後，接著我們進入簡單的測試階段，這裡我們使用nodejs做一個簡單的Web伺服器來實現

環境：

nodejs v8.9.3

express v4.X

1.創建一個目錄，架構如下：

• 一個views資料夾，裡面放入你剛剛寫好的HTML檔案

• 一個檔名為index的js檔案

• favicon.ico：網頁使用的小圖示，去網路上隨意找生成器隨便生一張放在根目錄即可

• package.json、package-lock.json、node_modiles：為nodejs執行所需要的檔案，如果不是使用nodejs，沒有也不會有影響。

2.因為我們在Web伺服器使用的模版為pug，因此我們需要將HTML檔轉換為pug檔，轉換器網路上都有提供，這裡就不提供了。

而轉換完成後的內容就是剛剛在views資料夾上看到的index.pug

它應該要長這樣：（此為範例，請勿直接複製使用）

index.pug

html
  head
    title FACEBOOK登入範例
  body
    script.
      window.fbAsyncInit = function () {
      FB.init({
      appId: '733151080227950', //這裡將換為自己的應用程式編號
      cookie: true,
      xfbml: true,
      version: 'v2.11' //這裡請改為自己使用的API版本
      });
      FB.AppEvents.logPageView();
      FB.getLoginStatus(function (response) {
      console.log('This a FB res', response);
      //statusChangeCallback(response);
      });
      };
      (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.11&appId=733151080227950';
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    |   
    #fb-root
    |   
    .fb-login-button(data-size='large', data-button-type='login_with', data-show-faces='false', data-auto-logout-link='false', data-use-continue-as='false')

3.打開index.js，寫一個簡單的Web伺服器程式，程式碼如下：（可直接複製使用）

/*jshint esversion: 6 */
(function() {
  'use strict';


  const express = require('express'); 
  const compression = require('compression');
  const morgan = require('morgan');
  const timeout = require('connect-timeout'); //用於express設定逾時
  const path = require('path');
  const serveFavicon = require('serve-favicon');

  const PORT = 7777;
  let app = express();

  app.set('trust proxy', 1);
  app.set('view engine', 'pug');
  app.set('views', `${__dirname}/views/`);
  app.use(morgan('common'));
  app.use(timeout('20s')); 
  app.use(compression());
  app.use(serveFavicon(`${__dirname}/favicon.ico`));

  app.get('/', function(req, res, next){
      return res.render('index');
  });

  app.listen(PORT, function() {
    console.log(`Service is ready on port ${PORT}`);
  });
}());

4.執行程式，開啟伺服器

在終端機輸入：

node index.js

正常開啟的情況下，你會在終端機看到這一條訊息：