Angular用にExpressサーバを設定する
はじめに
最近Webアプリに関わることが多い水無瀬です。
Angularだけはやったことあるんですが、サーバ側を全くやったことが無いのでExpressでやってこうと思います。
インストール
公式?サイトを参考にコマンドを叩いていきます。
Nodeは入っている前提です。
# サーバ用のフォルダ作成 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'); });