Windows環境でのAngularJSを使ったWebサーバ構築

やること

とりあえずローカル環境でのデプロイを目指す作業メモです。
適当にまとめてあるので、いらない作業がちょいちょいあります。 (SourceTreeがあるならgit for Windowsは不要だし、そもそもgit for Windowsなくてもなんとか動く?(未検証))

大まか概要

  • Node.js
  • Angular CLI
  • Atom(+package install)
  • (Git管理方法の選択肢a) AtomのGit/Github連携を使用する場合
  • (Git管理方法の選択肢b) SourceTreeを使用する場合
    • BitBucket
    • SourceTree
  • git for Windows
    の導入メモです。
    最小限ならNode.js、Angular CLIAtomgithub(バージョン管理したいなら)だけかと思われます。
    色々試した結果汚くなった。次回はもっときれいにまとめたい。

選択肢a, 選択肢bについて

  • 用途に合わせてお好きな方をどうぞ。なお関係としては、

備考

ほぼ以下を参考に構築しました。
【Angular入門(1)】開発環境をWindowsに構築してみる
エディタはVisual Studio Codeではなく、Atom(+platformio-ide-terminal, +Japanese menu)を使います。

Atom補足

  1. AtomVisual Studio Codeと同様にWindows/MacOS/Linuxで使用可能なマルチプラットフォームソフトウェアです。
  2. Atomはデフォルトでターミナル機能がありませんが、package(platformio-ide-terminal)installで使用可能になります。
  3. Atomはデフォルトでメニューバーが英語ですが、package(Japanese menu)installで一部日本語化できます。
  4. 元々はVisual Studio Codeを使用するつもりでしたが、Microsoft社Visual Studio Codeダウンロード先が内部障害鯖落ちしており、回避策としてAtomを使用しました。

作業内容

  • node.js
    • 参考URL同様インストール
  • Angular CLI
    • 参考URL同様インストール
  • github
    • 公式HPにいき、アカウント作成
    • 適当にCreate a new repositoryでリポジトリ作成
      • ここらへんはCUIでやりたい!とか好みがあるでしょうが、色々覚えるのが面倒なので自分はGUIで作成しました。
      • この時非公開が良いならprivateリポジトリにする。
      • README.mdもinitializeの時にチェックを入れて、作成しておく
        • リポジトリが作られる際に、テンプレ用ファイル(といってもREADME.mdファイルだけど)も格納しておいてくれる
      • 作成したリポジトリのzipをダウンロード&展開して、そのフォルダをお好きな場所に格納
        • 慣れない全部CUIだけでやる必要がなくなるのがGUIの便利なところ。このようにREADME.mdをinitializeすることで初心者が意味分からないなりに行うリポジトリの作成(CUIのやり方不明)、初期化「git init」、ファイルの監視対象へのステージング「git add XXX」、コミット「git commit」「git push https//XXXXXXXXXX」みたいなのをする必要がなくなる。よくわからないことをやると変なデータが残って嫌である。(不快)
  • Atom
    • ソフトウェアインストール
    • package install
      • Atom起動後、File→Setting→installで、platformio-ide-terminal, Japanese menuをinstallする。
    • 新規プロジェクトフォルダ
      • さっきダウンロード&展開したフォルダを指定する
    • Angular CLIでテンプレWebアプリ作成
      • ターミナル( Ctrl + ` )で以下実行

        powershell //powershell起動
        ng new helloWorld //テンプレWebアプリ作成
        cd helloWorld //作成したテンプレWebアプリの階層に移動
        ng serve --open //ローカルホストにデプロイし、ブラウザで開く
        ng build //配布するフォルダ構成でdistフォルダに出力

    • Commit & Push
      • そのまんま(東)

以下は個人的にいらないなーと思った作業だけどメモ書き

  • git for Windows
    • インストール
    • 初期設定
      • git config --global user.nameとかgit config --global user.email
    • 「git clone git://github.com/XXXXXXXXXXXX/YYYYYYYYYYYY.git」でgithubに作成したリポジトリをクローン
  • BitBucket
    • 公式HPにいき、BitBucketアカウント作成
    • 続けてBitBucket cloudアカウント作成、これでSourceTreeでクローンできるようになります
  • SourceTree
    • ソフトウェアダウンロード&インストール
    • リポジトリをクローンする