LoginSignup
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-07-22

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

ダウンロード

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-clientbbs-spa-serverという2つのフォルダが現れます。

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

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

キャプチャ1.PNG

** 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コマンドを実行してください。
以下のメッセージが表示されたら問題ありません。

キャプチャ2.PNG

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というフォルダを作成し、pytzpyjwtをインストールしてください。

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

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

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

SAMPLE.gif

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

動作について

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

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

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

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

以上です。

参考にしたドキュメント

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3