Angular用にExpressサーバを作る

9511 ワード
Express Angular Webアプリケーション Express テキストリンク

はじめに

Angularだけはやったことあるんですが、
サーバ側を全くやったことが無いのでExpressを勉強しようと思い最低限動かすとこまでまとめます。

前提条件

Nodeはインストール済み & OSはMacです。

インストール

公式？サイトを参考にコマンドを叩いていきます。

# サーバ用のフォルダ作成
mkdir server
cd server

# package.json作成
# 色々聞かれるけど、初期設定で良いのでEnter連打
npm init

# Expressをインストール
# 一応 --saveを付けておく
npm install express --save

これで、インストールは問題ないはず。

とりあえず動かしてみる

引き続きサイトを参考にindex.jsを作っていきます。

// 今のところ意味あるかわからないが一応付けとく
'use strict';

// expressインポート
import express from "express";

const app = express();

// '/'来た時返す
app.get('/', (req,res) => {
    res.send('Hello World!');
});

// ポート3000で待受
app.listen(3000, () => {
    console.log('listen on Port 3000');
});

最低限はこれでOKのハズ。。。
node index.jsで起動。

import express from "express";
^^^^^^

SyntaxError: Unexpected token import

だめじゃん！
調べてみたらNodeはES6で書けないっぽい。
仕方ないのでimportはrequireに修正。
下記の様にしました。

'use strict';
const express = require('express');
const app = express();

app.get('/', (req,res) => {
    res.send('Hello World!');
});

app.listen(3000, () => {
    console.log('listen on Port 3000');
});

もう一度実行するとlisten on Port 3000とちゃんと出てきた。
'http://localhost:3000'にアクセスするとHello Worldって出てた。
これでとりあえずOKっぽい。

アプリ置いてみる

さて、一番やりたかったWebサーバとして設定しようと思います。
公式サイト見てもわからなかったので、色々参考にして下記の様になりました。

'use strict';
const express = require('express');
const app = express();

// 変更箇所
app.use(express.static('./app/'));

app.get('/', (req,res) => {
    // 文字返してもしかたないのでconsole.logにしとく
    console.log('Hello World!');
});

app.listen(3000, () => {
    console.log('listen on Port 3000');
});

ちなみに置いているアプリはこれ。
アプリについては割愛趣味で作ってたものを置いてあります。
ng buildで出てきた内容をindex.jsと同じ階層の'app'ディレクトリにおいてあります。

アプリを置いたので、先程のアドレスにアクセス。
無事アプリを表示出来ました！！
出来ましたが、getを消しても動くのでよくわからないです。。。
その内調べたいですが、一旦動いてるので良しとします。

'use strict';
const express = require('express');
const app = express();

// 変更箇所
app.use(express.static('./app/'));

//app.get('/', (req,res) => {
    // 文字返してもしかたないのでconsole.logにしとく
    //console.log('Hello World!');
//});

app.listen(3000, () => {
    console.log('listen on Port 3000');
});
pythonクラスの共有属性プライベート属性インスタンス属性
関数の値の計算