本番の前に練習！バックエンドのウォーミングアップ！
Silicon Valley Super Ware
2020年7月9日
本番の前に練習！バックエンドのウォーミングアップ！
実際に、「SendGrid」のAPIを使う前に、今日は「express」を使ってみます。バックエンドの枠組みが分かった方がスムーズに行くと思うので今日は実際に 超簡単なバックエンドサービスを作ってみます！
「Hollo World!」を作ってみましょう！
今日やってみる事です！- Vue.jsのプロジェクトの作成
- Firebaseのプロジェクトの設定
- Firebaseの初期化
- Expressで「Hello world!」
今日やるのは、Firebaseの設定とExpressを使った簡単なWebサービスまでです。
早速始めましょう！
まずはVue.jsのプロジェクトを作成してください。5月、6月とVue.jsを使って サービスを作っているのでもう慣れたでしょうか？「vue ui」でも「vue cli」でも いいのでまずはプロジェクトを作ってください次にやる事が
- 「firebase-tools」のインストール
- 「firebase init」でFirebaseの初期化
今回は、「hosting」「functions」「firestore」「storage」を有効にしておきましょう！
> npm install -g firebase-tools
> firebase login
> firebase init
「firebase init」で、設定する機能を聞かれますが
> firebase login
> firebase init
- Firestore
- Functions
- Hosting
- Storage
- Emulators
後は殆ど標準の設定でＯＫです。
これでFirebaseを使う準備ができました！
つづいて、「express」のインストールです。
> npm install express --save
続いてFirebase Cloud Functionの設定を追加します。
プロジェクトのトップフォルダーにある「firebase.json」に
必要な記述を追加します。（赤で書いた部分を追加します）
"hosting": {
"public": "public",
"rewrites": [{
"source": "**",
"function": "app"
}],
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
},
これで準備完了です。
"public": "public",
"rewrites": [{
"source": "**",
"function": "app"
}],
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
},
バックエンドのコーディング
今回は、「Hello World!」を表示するだけの簡単なサービスです。 通常のWebページの様に「htmlファイル」は使いません。プログラムで「html」を返送します。
import * as functions from "firebase-functions";
import * as express from "express";
class AppServer {
public app: express.Express = express();
constructor() {
this.init();
}
init(): void {
this.app.get("/hello", (req: express.Request, res: express.Response) => { res.end("<h1>Hello World!</h1>");
});
}
}
const server = new AppServer();
exports.app = functions.https.onRequest(server.app);
今日作る部分はこれだけです。今回は、多くの方のご要望により、JavaScriptの代わりに
Typescriptで書いてみましたが、勿論JavaScriptでも実装できます
import * as express from "express";
class AppServer {
public app: express.Express = express();
constructor() {
this.init();
}
init(): void {
this.app.get("/hello", (req: express.Request, res: express.Response) => { res.end("<h1>Hello World!</h1>");
});
}
}
const server = new AppServer();
exports.app = functions.https.onRequest(server.app);
「init()」の中の「this.app.get("/hello", .....」の部分がExpressでURLのルーティングの 処理をしているところです。
「> firebase serve」で開発用のサーバーを動かして、
「http://localhost:5000/hello」にブラウザーでアクセスすると「Hello World」が表示されます
バックエンドが「/hello」のURLにアクセスしたのを検知して、
「<h1>Hello World!</h1>」
のHTMLコードをブラウザーに返答しているという仕組みです。
今月作るバックエンドサービスはこの「/hello」の代わりに、例えば「/send」のような
パス（ＵＲＬ）を指定して、SendGridにメッセージを転送するという物です。
本番用のバックエンドでやる事は？
本番用では、まずどの「URL」でメッセージの送信をするかを決めます。 つまり、「カスタムのAPI」の設定ですAPIが決まったら、「/hello」の部分を置き換えます。
あとは、SendGridのREST APIを使ってメッセージを送る処理を入れれば完成です！
というわけで、実際はバックエンドの処理はとてもシンプルなもので実現可能です。実際は、フロントエンドでメッセージを入力するフォームを作って送信するメッセージを作成します。 そのメッセージを、バックエンドに送って、バックエンドはSendGridのREST APIを使って 送信するという流れです。
作業的には、4月・5月で作成したお問合せフォームにバックエンドのサービスが追加された 感じの開発になります。
Firebaseを使えばバックエンドサービスも簡単！
今日はシンプルな実装例でしたが、外部のWebサービスのAPIを処理するだけのバックエンドのサービスは このように比較的簡単に実装できます。プログラムもフロントエンドと同じJavaScriptで書けるので改めて別のプログラミング言語を 勉強する必要もありません！
シリコンバレースーパーウエアでは、バックエンドを含めた本格的なWebサービスを短期間で 作れるようになる講座を提供しています。 単純に、Webサービスを作るだけではなく、どのように作って、どのようにビジネスにつなげて 行くかを提供します。また、フリーランスの方だけではなく、就職を考えている方にも 「実践力」を養うことで「即戦力」のエンジニアとしてのスキルを身に着ける事ができます！
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿