みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
Node.jsの解説シリーズです。
今回はAngular環境にExpressの導入とプロキシ設定について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- Expressの導入ができる
- プロキシ設定をしてローカルでサーバ環境を動かせる
環境構築しよう！
初期設定用コマンド
ng new my-app
cd my-app
npm install express
npm install -g express-generator
express server
cd server
npm install cookie-parser
npm install nodemon
cd ..
type nul > proxy.conf.json
npm install
npm start補足
ng new my-app
cd my-app
// ↓Expressのインストール
npm install express
// ↓Expressの自動設定ツールのインストール
npm install -g express-generator
// ↓serverというDirにExpress環境を構築
express server
// ↓serverへ移動し、パッケージのインストール
cd server
npm install cookie-parser
npm install nodemon
// ↓親Dirにプロキシ設定ファイルを作成
cd ..
type nul > proxy.conf.json
npm install
npm startやっていることは上記のとおりです。
プロキシの設定
そもそもプロキシとは
この時点で実はExpressの環境自体はできています。
しかし、基本的にExpressとフロントエンドの環境は別のポートで動いています。
- フロントエンド : http://localhost:4200/
- Express : http://localhost:3000/
Angular環境ではこのように動いています。
ポートの壁は超えられないのでこのままではフロントエンドとExpressは接続ができません
つまり、サーバ側(=Express)で設定したAPIを叩くことができません！
このポートの壁を突破するための変換機能がプロキシです。
proxy.conf.json
proxy.conf.json
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"logLevel": "debug",
"pathRewrite": { "^/api": "/" }
}
}このようにプロキシ設定をすることで、
/apiへのアクセスをhttp://localhost:3000へ変換します。
図解するとこのようになります。
逆に言うと、このような設定をしないと、
フロントエンドからExpressのAPIを叩くことはできません。
“http://localhost:3000″へアクセスするプロキシだよ！
パッケージの設定
{
"name": "my-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve -o --proxy-config proxy.conf.json",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^15.1.0",
"@angular/common": "^15.1.0",
"@angular/compiler": "^15.1.0",
"@angular/core": "^15.1.0",
"@angular/forms": "^15.1.0",
"@angular/platform-browser": "^15.1.0",
"@angular/platform-browser-dynamic": "^15.1.0",
"@angular/router": "^15.1.0",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.1.3",
"@angular/cli": "~15.1.3",
"@angular/compiler-cli": "^15.1.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.9.4"
}
}念のためそのまま掲載していますが、書き換える行は以下のみです。
他のバージョン等は異なっていて問題ありません。
"start": "ng serve -o --proxy-config proxy.conf.json",実際に起動させてみよう！
いきなり超重要なことなのですが、
本環境ではmy-appとmy-app/serverは別々に起動させる必要があります！
フロントエンドの起動
my-appをVSCodeで開いてターミナルで
npm start を入力してください。
Express(サーバ)の起動
my-app下の/serverをVSCodeで開いてターミナルで
nodemonを入力してください。
ブラウザで確認
http://localhost:4200/apiへアクセスしてください。
このような画面が表示されていれば成功です。
補足
なぜこのような画面が表示されるかというと
[server/app.js]でのルーティング設定でindexRouterのファイルを参照しているからです。
app.use("/", indexRouter);[server/routes/index.js]
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;ルーティングについてはこちらを参考にしてね！
GitHubのサンプルコード
今回作ったものはGitHubにあげているので
うまく動作しなかった方は是非ダウンロードしてみてください。
まとめ
- 未設定では別ポートへのアクセスはできない
- プロキシ設定を行うことで別ポートへのアクセスが可能になる
- フロントとサーバは個別に起動させる
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
