【Node.js】Expressの導入とプロキシ設定【Angular】

ANGULAR

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Node.jsの解説シリーズです。

今回はAngular環境にExpressの導入とプロキシ設定について学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • Expressの導入ができる
  • プロキシ設定をしてローカルでサーバ環境を動かせる
ここではAngular環境に組み込むよ!

環境構築しよう!

初期設定用コマンド

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:4200/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",
npm startした際に、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;
これはサンプルデータなので書き換えてOKだよ!
ルーティングについてはこちらを参考にしてね!

404 NOT FOUND – サメハック
Infomation for Engineer🦈

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
うまく動作しなかった方は是非ダウンロードしてみてください。

GitHub - same-hack/Angular-Express-Proxy
Contribute to same-hack/Angular-Express-Proxy development by creating an account on GitHub.
Angularの環境構築は大変なのでよければどうぞ!

まとめ

  • 未設定では別ポートへのアクセスはできない
  • プロキシ設定を行うことで別ポートへのアクセスが可能になる
  • フロントとサーバは個別に起動させる

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました