AWSでサーバー構築してみました。（つづき）

AWSでサーバー構築してみました。の続きの記事です。作業用ユーザーの追加と、Virtual Hostの設定、ベーシック認証について書いてます。

1. 作業用ユーザーを追加

新しいユーザー用にユーザーアカウントを作成します。

adduser コマンドを使用してユーザーアカウントを追加

[ec2-user ~]$ sudo adduser newuser

新しいアカウントに切り替えます。

ec2-userからnewuserに変わります。

[ec2-user ~]$ sudo su - newuser
[newuser ~]$

なんでユーザーを作るの？

デフォルトのユーザーアカウントを使用することは多くのアプリケーションで適切ですが、ユーザーアカウントを追加すると、個人が自分だけのファイルと作業場所を確保できます。新しいユーザー用にユーザーアカウントを作成することは、ec2-user アカウントへのアクセス権を複数のユーザーに (経験のないユーザーも含めて) 与えるよりも、はるかに安全です。これはアカウントが不適切に使用された場合、システムにさまざまな損害を与える可能性があるためです。

2.パーミッションの設定

newuserディレクトリのアクセス許可を 755(所有者のみ、書き込みが可能) に変更します。

chmod -R 755 /home/newuser

3 公開鍵の設置と設定

newuser ホームディレクトリに .ssh ディレクトリを作成し、そのファイルのアクセス許可を 700 (所有者のみ、読み取り、書き込み、削除が可能) に変更

[newuser ~]$ mkdir .ssh
[newuser ~]$ chmod 700 .ssh

authorized_keys という名前のファイルを .ssh ディレクトリに作成し、そのファイルのアクセス許可を 600 (所有者のみ、読み取りおよび書き込みが可能) に変更

[newuser ~]$ touch .ssh/authorized_keys
[newuser ~]$ chmod 600 .ssh/authorized_keys

viでauthorized_keys ファイルを開いて公開鍵を貼り付け。 変更を保存します。

[newuser ~]$ vi .ssh/authorized_keys

これで、authorized_keys ファイルに追加した公開鍵の対である秘密鍵を使用して、インスタンスの newuser アカウントにログインできます。

4. Virtual Hostの設定

Virtual Hostとは？

一台のサーバーで仮想的に複数のドメインを運用するサーバー技術の一種で、主にメールサーバーやWebサーバーなどで利用されています

httpd.confの設定

まず、VirtualHostを使う宣言をApacheの設定ファイルであるhttpd.confに記述します。

[newuser ~]$ sudo vi /etc/httpd/conf/httpd.conf

ServerName www.example.com:80
↓
ServerName パブリック IP

nameVirtualHost *:80 の記述をhttpd.confに追加。 （IncludeOptional conf.d/*.confの記述の上に書きました。）

virtual.confの設定

ファイルの名前はなんでもいいそうです。

IncludeOptional conf.d/*.confが書かれているのでApacheは起動時に/etc/httpd/conf.d/以下にある*.confファイルを全て読み込みます。

旧CentOSでは、httpd.confに全て記載していましたが、CentOS7からはメイン設定は、 「/etc/httpd/conf/httpd.conf」に記載され、その他の設定は「/etc/httpd/conf.d/」ディレクトリ内に分散設置しています。

conf.dに移動してvirtual.confファイルを作成します。

touch virtual.conf

virtual.confファイルを編集します。

vi virtual.conf

以下の記述を書いて保存します。

#newuser
<VirtualHost *:80>
    DocumentRoot /home/newuser/***
    ServerName www.****.com
    ErrorLog /home/newuser/logs/newuser-error_log
    CustomLog /home/newuser/logs/newuser-access_log combined
    <Directory /home/newuser/***>
        AllowOverride All
        Require all granted
        Options All
    </Directory>
</VirtualHost>

5. apacheの再起動

virtual.confを変更後、設定を有効にするためにhttpdを再起動します。

sudo systemctl restart httpd

ウェブブラウザで、www.****.comを入力し、ページが表示されたら成功です。

6. ベーシック認証をつけてみる

.htaccessファイルを作ります。

/home/newuser/***以下に作成します。

touch .htaccess

vi .htaccess

以下の記述を書いて保存します。

AuthUserFile /home/newuser/.htpasswd
AuthGroupFile /dev/null
AuthName StaffOnly
AuthType Basic
require valid-user

記述の解説

AuthUserfile /フルパス/.htpasswd

サーバーのルートディレクトリからの.htpasswdへのパスを指定

AuthGroupfile /dev/null

グループごとにアクセスを許可する、という指定。「/dev/null」とは、そのようなファイルは存在しないという意味でグループごとでのアクセス制限はしないという意味。

AuthName

ダイアログに表示される文章を指定。

AuthType Basic

AuthTypeを指定。「Basic（ベーシック認証）」と「Digest（ダイジェスト認証）」の2種類がある。

require valid-user

ユーザーが誰であろうと、入力したIDとパスワードが合っていればアクセスできるという意味。

.htpasswdファイルを作成します。

touch .htaccess

.htpasswdは、IDとパスワードを書きこむファイルです。

.htpasswdのファイルは、DocumentRootより上に設置します。

なので/home/newuser以下に作成します。

touch .htpasswd

パスワード暗号化ツールなどでパスワードを生成します。 http://www.luft.co.jp/cgi/htpasswd.php

できたパスワードを.htpasswdに記述します。

vi .htpasswd

500 Internal Server Error

.htaccess ファイルに文法誤りがあると、500 Internal Server Error となるので、再度確認します。

以上、はじめてのサーバー構築です...！

（これであってるのかな...）

AWSでサーバー構築してみました。

少しサーバーのこととか勉強したいなあ、と思ってAWSでサーバーを構築してみました。 とりあえず、インスタンスの作成、LAMPのインストール、apacheのテストページを表示させるところまでです。

1. アカウントの作成

アカウントを作成します。

2. AWSにサインイン

コンソールにログインします。

3. EC2のインスタンスを作成

EC2をクリックします。

インスタンスの作成をクリック。

OSを選びます。
とりあえずAmazon Linux 2 AMI (HVM), SSD Volume Type を選んでみました。

インスタンスタイプの選択をします。 無料枠のt2.microを選びました。

インスタンス作成の確認画面です。 確認ができたら、作成を押します。

4. キーペアの作成

サーバーへの接続は公開鍵認証になるので、秘密鍵を作成します。

新しいキーペアの作成を選択してキーペア名を入力し、
キーペアのダウンロードをクリックしてダウンロードします。

ダウンロードが完了したらインスタンスの作成をクリックします。

5. インスタンスの作成中

インスタンスの表示ボタンをクリックし、作成が成功していれば以下の画面になります。 インスタンスの状態がrunning、ステータスチェックが2/2のチェックに合格しましたであれば成功です。

6. サーバーに接続

接続ボタンをクリックすると、接続方法が書いてあるので、手順通りに進めます。

作成したキーは適宜置き場所を変えます。

windows環境だと、以下の手順で接続しました。

ssh ec2-user@パブリック IP -i C:\Users\キーの場所\*****.pem

7. LAMP ウェブサーバーをインストール

ブラウザからURLにアクセスしたいので、LAMPをインストールします。

LAMP?

Linux ＋ Apache ＋ MySQL ＋ PHP（Perl、Python）で構成される環境のこと

手順は以下のチュートリアル通りです。 https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2.html

以下に手順を書いていますが、内容はさっきのURLと同じです。

1. ソフトウェアの更新を実行

すべてのソフトウェアパッケージが最新の状態であることを確認します。
$ sudo yum update -y

2. LAMP MariaDB と Amazon Linux 2 PHP パッケージの最新バージョンを取得

sudo amazon-linux-extras install lamp-mariadb10.2-php7.2 php7.2

3. Apache ウェブサーバー、MariaDB、PHP ソフトウェアパッケージをインストール

sudo yum install -y httpd mariadb-server

4. Apache ウェブサーバーを起動

sudo systemctl start httpd

5. systemctl コマンドを使用して、システムがブートするたびに Apache ウェブサーバーが起動するように設定

sudo systemctl enable httpd

httpd が有効であることを確認

sudo systemctl is-enabled httpd

6. インバウンド HTTP (ポート 80) 接続をインスタンスに許可する。

コンソールのセキュリティグループをクリック、アクションの中のインバウンドルールの表示を選択。

次の値で新しいインバウンドセキュリティルールを追加。

• Type: HTTP
• Protocol: TCP
• Port Range: 80
• Source: Custom

7. ウェブサーバーのテスト

ウェブブラウザで、インスタンスのパブリック DNS アドレス (またはパブリック IP アドレス) を入力します。

Apache テストページが表示されると成功です。

ふう。
次の記事はバーチャルホストの設定のこととかを書く予定です。。。

Vue.js + Vue-cli + bulmaで作るSPA

SPAを作ってみたいなあ、と思って実際に作ってみたのでメモです。

実際にページを作成してSPAを試してみたかったのでcssフレームワークbulmaを使って作りました。

こんな感じのページができます。

https://cidermitaina.github.io/spa-page/#/

（vue init webpackでできるVueアプリケーションの中身解説が多めです。bulmaの使い方は触れません。）

1.vue-cli のインストール

Vue.jsを使う環境を準備するためのコマンドラインインタフェースをインストールします。

vue-cliでインストールを行うとVue.jsの環境をものすごく簡単に構築できます。

npm install -g vue-cli

2.プロジェクトを作成

vue init webpack プロジェクト名

3. ローカルで確認する

cd プロジェクト名

npm run dev

ブラウザで http://localhost:8080/ をアクセスするとサンプルが表示されます。

4.Vueアプリケーションの中身は？

npm run build

をすると実際に動くソースが作られます。（./dist フォルダ）

├── dist
  ├── index.html
  └── static
      ├── css
      └── js

./dist/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>spa-site</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>
<body>
  <div id=app></div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js>
</script>
<script type=text/javascript src=/static/js/vendor.7fed9fa7b7ba482410b7.js>
</script>
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script>
</body>
</html>

index.html → buid → ./dist/index.htmlになったみたいです。

./src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

./src/App.vueをコンポーネントとして登録しているようなので見てみます。

./src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<router-view/>?

vue-routerライブラリがパスに応じて表示するコンポーネントを切り替えています。

設定されているかというとsrc/router/index.jsです。

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

pathで'/'にアクセスすると、<router-view/>にHelloWorld.vueが表示される

import HelloWorld from '@/components/HelloWorld'の＠って？

webpack.base.conf.jsの

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

にsrc ディレクトリの alias を定義しています。

Webpack を使っていてファイルの相対パスを書くのがつらくなったとき - kitak blog

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

dataで持っているmsgの値を{{ msg }}で表示しています。 Vue単一コンポーネントはコンポーネントスコープCSSという機能があり、<style scoped>の部分でスコープ宣言されてます。これによって、CSSが他のコンポーネントに影響を与えることなく分離し、CSSの管理がしやすくなります。

5. 中身を変更していく

中身が理解できたところで、編集してページを作成していきます。

1.ルーティングの設定

まずはコンポーネントファイルを作成します。 HelloWorld.vueをコピーして、必要なページ分作成します。 今回はtopページ、aboutページ、noteページ、apiページ、contactページを作成します。

├──components
  ├── about.vue
  ├── api.vue
  ├── contact.vue
  ├── note.vue
  └── top.vue

次にルーティングの設定です。

./router/index.jsを編集します。

import Vue from 'vue'
import Router from 'vue-router'
import top from '@/components/top'
import about from '@/components/about'
import note from '@/components/note'
import api from '@/components/api'
import contact from '@/components/contact'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'top',
      component: top
    },
    {
      path: '/about',
      name: 'about',
      component: about
    },
    {
      path: '/note',
      name: 'note',
      component: note
    },
    {
      path: '/api',
      name: 'api',
      component: api
    },
    {
      path: '/contact',
      name: 'contact',
      component: contact
    }
  ]
})

2.リンクの設定

次にApp.vueを編集してリンクをつけていきます。

<ul>
  <li>
    <router-link to="/">Top</router-link>
  </li>
  <li>
    <router-link to="about">About</router-link>
  </li>
  <li>
    <router-link to="note">Note</router-link>
  </li>
  <li>
    <router-link to="api">Api</router-link>
  </li>
  <li>
    <router-link to="contact">Contact</router-link>
  </li>
</ul>

これで仕組みは完成です。 あとは、ページを作成していきます。

3.bulmaのinstall

bulmaをinstallします。

npm install bulma

npm install bulma sass-loader node-sass --save-dev

App.vueにbulma本体のimportの記述を追記します。

<style lang="scss">
@import "../node_modules/bulma/bulma.sass";
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

これでbulmaを使って簡単にページを作成できるようになりました。

あとは、自由にbulmaを使ってページを作成していくだけです。

思ってたよりも簡単にできました◎

今回はbulmaを使ってページを作る手順は省略しますが、公式を見れば詳しく書いてあるので簡単に作れちゃうはずです。

bulma.io

今回作成したページのソースを参考に貼っておきます。

github.com

Go言語でhttpサーバーを立ち上げる

Go言語でHTTP通信をするには、net/httpパッケージを使用します。

package main

import (
    "io"
    "net/http"
)

func infoHandler(w http.ResponseWriter, r *http.Request) {
    // HTML テキストをhttp.ResponseWriteへ
    io.WriteString(w, `
  <!DOCTYPE html>
  <html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>hello</title>
  </head>
  <body>
  <h1>Hello World</h1>
  </body></html>
  `)
}

func main() {
    // /hello にアクセスした際に処理するハンドラーを登録
    http.HandleFunc("/hello", infoHandler)

    // サーバーをポート8080で起動
    http.ListenAndServe(":8080", nil)
}

ハンドラ関数の定義

HTTPリクエスト発生時に呼び出される具体的な処理が書かれています。(infoHandler関数) ハンドラ関数は、必ず以下形で定義します。

func 関数名(w http.ResponseWriter, r *http.Request) {
    // 実行する処理
}

http.ResponseWriterインタフェース

ハンドラ関数の第一引数には、http.ResponseWriterインタフェース型のオブジェクトが渡されます。 このオブジェクトはHTTPレスポンスヘッダへの値セットや、HTTPレスポンスボディへの出力に使用します。

ioパッケージ

基本的な入出力のための型とインターフェイスがまとめられたパッケージ。

WriteString関数

func WriteString(w Writer, s string) (n int, err os.Error)

WriteStringは、wに文字列sの内容を書きこみます。

ハンドラ関数の登録

main関数内でhttp.HandlerFunc関数を使用することで、 アクセスパスとハンドラ関数を結びつけています。

http.HandleFunc("/hello", infoHandler)

サーバの起動

全てのハンドラ関数の登録が完了したら、サーバの起動を行います。

http.ListenAndServe(":8080", nil)

プログラムを実行するには？

基本的には、go run hoge.goもしくはgo build hoge hoge.go | ./hogeとすることで実行することができます。

go build

goはコンパイル型言語なので、CやJavaのように基本的にはコンパイルする必要があります。

go build [コンパイル後のファイル名] [コンパイルしたいファイル名]

コンパイルし,コンパイル後のバイナリファイルを実行するには

./[コンパイル後のファイル名]

で実行します。

go run

自動的にコンパイル・実行してくれる便利なコマンド。

go run ファイル名

コンパイルして実行せずに実行できます。

webpackについて丁寧に。

webpack4になったので、これを機に丁寧に理解したいなあ、と思ってまとめました。 自分用メモです。

webpackとは

モジュールバンドラのこと。 まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。

モジュールバンドラ
複数のモジュールを1つにまとめたファイルを出力する
ツールのこと

なんでモジュールバンドラを使うの？

• 機能ごとにファイルを分割（モジュール化）できるから
• 自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できるから
• リクエスト数を減らせるから
• 依存関係を解決したファイルを出力できるから
  
  自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できます。
  
  
  

ファイルを分割（モジュール化）するメリットは？

• コードが見やすくなる
• 名前空間を生成できる（変数の競合やグローバル汚染を防ぐ）
• モジュールの保守性を高められる
• モジュールの再利用性を高められる
  
  
  

webpackを使ってみる

実際にwebpackを使う手順です。

1. webpackローカルインストール

npm install webpack --save-dev
or
yarn add webpack --dev

2. webpack-cliのインストール

webpackコマンドでwebpackを実行するために、以下のコマンドでwebpack-cliをインストールします。
（webpack 4から必要になったみたいです。）

npm install webpack-cli --save-dev
or
yarn add webpack-cli --dev

3. webpack.config.jsの設定

webpack.config.jsとは？

webpackの設定ファイルのことです。

// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');

module.exports = {
  // モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
  mode: 'development',
  // エントリーポイントの設定
  entry: './src/js/app.js',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'bundle.js',
    // 出力先のパス（v2系以降は絶対パスを指定する必要がある）
    path: path.join(__dirname, 'public/js')
  }
};

4. webpackコマンドで実行

npx webpack

or

npm run webpack

or

yarn webpack

を実行するとbundle.jsという名前のファイルがpublic/js/配下に出力されます。

webpack.config.jsを詳しく

webpack.config.jsの設定に関してさらっと流しちゃったので、詳しくまとめます。

module.exports = {
    mode: 'development',
    entry:'./src/assets/js/main.js',
    output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public/assets/js')
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}

1. mode

モードはdevelopment、production、noneが存在します。

・production

productionにすれば、何も指定しなくてもコードが圧縮されます。 自分で設定をカスタマイズする場合は、uglifyjs-webpack-pluginというプラグインが必要になります。

たとえば、

bundleしたソースのconsoleを消す

uglifyjs-webpack-pluginをinstallします。

npm install uglifyjs-webpack-plugin --save-dev

or

yarn add uglifyjs-webpack-plugin --dev

or

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/js'),
  },
  optimization: {
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {compress: {drop_console: true}},
      }),
    ],
  },
};

www.npmjs.com

・development

差分ビルドの高速化がされている。

・none

すべての設定が無効。

2. entry

出力の設定

3. output

出力の設定。 出力するファイル名や出力先のパスを指定する。 OSによってパスが異なることを防ぐために、出力先のパスの指定にはpath.join()を利用

4. loader

画像やCSSなどのJavaScript以外のファイルをJavaScriptで扱えるように変換したり、バンドルする前にモジュールに対して実行する機能のことです。 TypeScriptをJavaScriptに変換、画像をDataURLに変換、コードをチェックするなど、ローダーによって機能は様々。 js以外のどんなファイルでもloaderさえ使えば読み込むことができます。

module: {
    rules: [
        {
        // 拡張子 .js の場合
            test: /\.js$/,
            exclude: /node_modules/// node_modules は除外する
            //利用するローダー
            use: [{
                  loader: 'babel-loader',// Babel を利用する
                  options: {
                      presets: ['env']
                  }
            }],
        }
    ]
}

babel-loader
ES2015（ES6）のコードをES5のコードに変換するローダー。

www.npmjs.com

って感じです。

node,jsの続きを書こう書こうと思って、webpackのを書いちゃいました。。。 忘れないうちにnode.jsの続きも書こうと思います。

音楽のことも書きたい...

はじめてのNode.js 2

昨日の続きです。

express-generatorで吐き出されたapp.jsのコードを読んでみたのでまとめてみました。
（以下のソースは全て吐き出されたapp.js上のコードです。）

あと、せっかくなのでHerokuを使ってサーバー公開してみるところまでやってみたので手順をまとめました。

1. expressのapp.js

• サーバー起動時に実行するファイル
• 必要なURL（ルーティング）を決めていく
• 使用するミドルウェアを設定していく

2. app.set

expressで使うテンプレートエンジンを設定する

var express = require('express');
var path = require('path');
var app = express();

 // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

1. expressとnode.jsのpathモジュールを読み込む
2. appを用意、ejsを置くディレクトリを決めて、 view engineとして指定する

• app.set()
  
  • アプリケーションを必要とする各種の設定情報をセットするためのオブジェクトとメソッド
    
• view engine
  
  • テンプレートエンジンの種類を示す。具体的には第二引数で’ejs’をテンプレートエンジンを使用しているということになる
• path.join関数
  
  • 返り値として第1引数以降のパスを順番に結合したパスが得られる
• __dirname
  
  • 現在実行中のソースコードが格納されているディレクトリパスが格納されている
    ex) ~/hoge/Foo.js/a.js → ~/hoge/Foo.js

以下がexpressの公式ドキュメントです。app.setのことをもっと詳しく書いてくれてます。
http://expressjs.com/ja/4x/api.html

3. app.use

使うミドルウェアの設定、URLの設定（ルーティング）を行う。
next();が呼ばれる度に実行される。

必要なモジュールを読み込んだり、/や/usersのようにルーティングを記述。

var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');


 // morganを使ってlog出力を行う 
app.use(logger('dev')); 

// body-parserでユーザーのリクエストのbody情報を取得
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false })); 

// リクエストを受けてcookie情報を取得する
app.use(cookieParser());

// 静的ファイルの場所を指定する。ここでは public/ 以下のファイルが静的ファイルとして設定される
app.use(express.static(path.join(__dirname, 'public')));

// routes/index.js のルーティング内容を 'http://domain/' をGETで受け取った時に実行する
app.use('/', routes);
// routes/users.js のルーティング内容を 'http://domain/users' をGETで受け取った時に実行する
app.use('/users', users);

• morgan

  • logの出力。
    morgan() の引数に文字列を渡すか、format: を指定することで、ログのフォーマットを指定することができる。

• body-parser

  • HTTPリクエストボディのデータを取得する

• express.static

  • 静的ファイルの読み込み
    img、CSS ファイル、JavaScript ファイルなど

4. module

//routesというモジュール
var routes = require('./routes/index');

app.use('/', routes);

routes/index.js のルーティング内容を 'http://domain/' をGETで受け取った時に実行

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

. /routes/index.ejsをrenderして返す処理

5. Herokuを使う

herokuとは?

gitでコードを送られると、自動でサーバー公開までやってくれる便利なサービス。

Herokuに登録、Heroku Toolbelをインストール

Heroku

jp.heroku.com

Heroku Toolbel devcenter.heroku.com

Procfileを用意する

Procfileとは？

herokuがこのプロジェクトを起動するときに実行するコマンドを記載している。

Herokuにpush

1. Herokuにログイン
   heroku login

2. Herokuに新しいアプリケーションを作成
   heroku create XXX

3. Herokuにpushする
   git push heroku master

4. Herokuコマンドでサーバーを起動
   heroku ps:scale web=1
   
   

6. まとめ

• express-generatorで吐き出されたapp.jsの中身を確認。
• herokuのリモートリポジトリを使い公開

はじめてのNode.js 1

この間、社内用のテンプレートファイルを作成するにあたってgulpfileを作成していたのですが、 謎のエラーに遭遇しました。。。

このエラーが、気になって気になってもやもやしてたのですが、 調べてるうちにNode.jsのことを何も分からずに書いてたなあ、と思い勉強したことのまとめです。

1. node.jsとは

javascriptを使ってサーバーサイドのコードを書くことができるプラットフォーム。 イベントループモデルで、ノンブロッキングI/Oを使用している。

特長

• V8エンジンで動いている

  • chromeで使われているJavascriptエンジン
  • ブラウザとほぼ同じJavascriptが書ける

• イベント駆動

  • 何かのきっかけで処理を行う仕組み

• ノンブロッキングI/O

  • ファイルの読み込みのような時間がかかる処理を非同期に実行ができる
  • 処理を詰まらせずにできる

2. node.jsはイベントループなサーバー

WEBサーバの種類

apache →接続ごとにメモリを確保する為、同時リクエスト数に上限がある。

NGINX →イベントループで非同期の為同時リクエストに強い。

イベントループなサーバーだと何がいいの？

多くのユーザーの同時アクセス・大量リクエストを捌きやすい。 イベントループで処理を待たずに、イベントが呼ばれるまでループする

node.jsはjavascriptを知っていれば使える。

3. node.jsでwebサーバーを立てる

httpのcreateServerを使います。

var http = requre('http');  //モジュールを読み込む、使う

http.createServer(function(req, res){
    res.writeHead(200, {'content-Type': 'text/plain'});
    res.end('Hello World');
}).listen(3000);

node.jsのモジュール群

• http/https
• dns
• path
• fs など

Index | Node.js v8.17.0 Documentation

4. expressを使う

expressとは

• Node.jsで一番使われているフレームワーク
• スケルトンプロジェクトのジェネレーターもある
• 基本的な機能はほぼ揃っている

expressで使ったスケルトンサイト作成

1. グローバルにexpressをインストール
   npm install -g express-generator
   
   ※「express-generator」というnpmモジュールを使用すると、アプリのひな型を自動生成することができます。 ビューのテンプレートエンジンも選択でき、すぐに動作を確認することが可能

2. expressアプリケーションの作成
   express -e myapp(-eはejs、myappというプロジェクト)

3. サーバー起動
   cd myapp,npm install,npm start

5. サーバーから静的ページ配信

Webサーバーは何してる？

ブラウザからのGETリクエストにレスポンスしてデータを返している

expressでGETする流れ

GETとは?

• ブラウザからサイトを見るときに送るHTTPメソッド
• 他にはPOST / PUT / DELETE がある。 用途で分ける

app.get('/newpage', function(req, res){
    res.render('newpage', {text: 'ejsに文字列を渡す'});
});

上記コードを詳しく見ていくと、

app.get('/newpage'
ブラウザからどのURLにリクエストが来た時の挙動なのか記述

function(req, res){
    res.render('newpage', {text: 'ejsに文字列を渡す'});
});

コールバック関数のレスポンス(res)で指定ejsファイル名をレンダリングするように記述。 このときにテンプレートへ渡す引数があれば引数にいれる

6. まとめ

• node.jsはサーバーサイドでJavaScriptを書くことが出来るプラットフォーム
• 同時アクセスが多く、大量のリクエストがあるサーバー向き
• expressを使えばWebアプリ構築が簡単にできる
• 基本的なサーバはGET / POST などのHTTPメソッドを捌いているだけなので怖くない