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
    • ソフトウェアダウンロード&インストール
    • リポジトリをクローンする

イタリア旅行

今後のために、イタリア旅行した時の段取りを整理

  • 前提

    • 筆者は、関東在住の社会人
    • 休暇は、年末年始休暇と有給休暇を利用
    • 要件は、なるべく安く、高コスパな旅行プラン
  • 旅行スケジュール

    • 準備:荷物半日(出発前日には済ます)
    • フライト前泊:羽田近辺に宿泊
    • フライト行き:午前に羽田発、北京で乗継して、夕方にイタリア着
    • 滞在:7泊8日
    • ローマ:4日
    • フィレンツェ:1日(日帰り)
    • オルヴィエート(チヴィタ・ディ・バニョレージョ):1日
    • ヴェネチア:2日
    • フライト帰り:昼過ぎに出発して、フランクフルトと北京で乗継して、翌日夜に羽田着
  • フライト詳細(行き)

    • 所要時間:17h20min
    • スケジュール
      • HND(8:30)→PEK(11:30):4h
      • Transit:2h
      • PEK(13:30)→FCO(17:50):11h20min
  • フライト詳細(帰り)

    • 所要時間:21h10min
    • スケジュール
      • VCE(14:50)→FRA(16:15):1h25min
      • Transit:3h
      • FRA(19:15)→PEK(11:45)
      • Transit:4h
      • PEK(15:45)→FCO(20:00):11h20min
  • 費用

    • 航空券:8.7万
    • 宿泊費:5.6万
      • 前泊:0.7万
      • ローマ4泊:3万
      • オルヴィエート1泊:0.7万
      • ヴェネチア2泊:1.2万
    • 電車賃:3.5万程度
    • その他
      • mytaxi:0.2万程度
      • ローマ地下鉄:0.3万程度
      • オルヴィエートのロープウェイ:0.1万程度
      • チヴィタ・ディ・バニョレージョまでのバス:0.2万程度
      • ヴェネチアのヴァポレット2day券:0.3万程度
  • 他費用

    • モバイルWi-Fi(600MB/1day)フォートラベル大容量LTEプラン:0.3万程度
    • 食費・交際費・お土産代:10万程度
  • 総額:28.1万