SPAの学習用サンプル（Angular2 + Bootstrap / App Engine/Python + webapp2）

6161 ワード
Python Bootstrap TypeScript Angular2 Python テキストリンク

最近、無職になって時間があり余っているため、このようなものを作ってみた次第です。

ダウンロード

BBS-SPA

ここにあります→https://github.com/syousei/bbs-spa

特徴

BBS-SPAはSPA(Single Page Application)のサンプルです。
クライアントサイドはAngular2 + Bootstrapを、サーバーサイドはApp Engine/Python + webapp2を使用しています。

機能

  • ユーザー登録・認証（ログイン/ログアウト）※JWT（JSON Web Token）認証を採用
  • トピックの投稿
  • トピックへのコメント

セットアップ

前提

先に以下をセットアップしておいてください。

この記事にご興味を持たれた方は、このあたりは大体できていると思いますが。

BBS-SPAのセットアップ

上記よりダウンロードしたBBS-SPAを適当な作業フォルダに展開します。
すると、bbs-spa-clientとbbs-spa-serverという２つのフォルダが現れます。

ご想像のとおり、bbs-spa-clientにはAngular2 + Bootstrapで作られたクライアントサイドのファイルが、bbs-spa-serverにはApp Engine/Python + webapp2で作られたサーバーサイド（API）のファイルがそれぞれ格納されています。

それではターミナル（コマンドプロンプト）を開いてbbs-spa-clientに移動し、npm startコマンドを実行してください。
以下のメッセージが表示されたら問題ありません。

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **

（省略）

webpack: Compiled successfully.

次にGoogle Cloud SDK Shellを開いてbbs-spa-serverに移動し、dev_appserver.py app.yamlコマンドを実行してください。
以下のメッセージが表示されたら問題ありません。

Starting module "default" running at: http://localhost:8080
admin_server.py:116] Starting admin server at: http://localhost:8000

pytzとpyjwtのインストール

bbs-spa-serverの直下にlibというフォルダを作成し、pytzとpyjwtをインストールしてください。

よくわからなければ、それぞれ次のURLからダウンロードして、解凍すると出てくるpytzとpyjwtという名前のフォルダをbbs-spa-server/libの中に放り込めばOKです。

以上でセットアップ完了です。

ブラウザでhttp://localhost:4200を開いてみましょう。会員登録制の掲示板が使えるようになっていると思います。

もし登録したユーザー情報や投稿内容を編集・削除したい場合は、http://localhost:8000でApp Engineの管理コンソール（ローカル版）が開きます。

動作について

本来ならサーバーサイドスクリプトとクライアントスクリプトが同じホスト上に置かれるわけですが、ローカルで動かすにあたってAngular2の開発サーバーとApp Engineの開発サーバーをそれぞれ別に起動しなければならないため、別々のフォルダに格納しています。

実際にApp Engineにデプロイしてみたい場合は、bbs-spa-clientのビルド先をbbs-spa-serverの中の静的ファイルを格納するフォルダ（例えば /static_files/distなど）に設定してあげる必要があります。

そのあたりをご理解の上、学習用にお使いいただければと思います。
ご質問などあればコメントしてください。

また、これを作るにあたってAngular2やTypeScriptをほぼ初めて使ってみたので、いろいろと不格好なところがあると思います。
もしお気づきの点があればコメントで助言いただけるととても嬉しいです。

以上です。

参考にしたドキュメント