Front-end 開発環境メモ

今は、Front-endデベロッパーなので、メモとして開発環境などを残して置く。

現在のプロジェクトは、Angular (Version 2以降)で、Back-endはJavaという構成。Front-end は Typescript を Angular-cli でコンパイルして開発を行っている。

デベロッパーはMAC使ってる人が多いんだが、コスパの影響でWindowsマシンを頻繁に買い替えるか、組み替えるので、MACという選択肢は無い。お金持ちなら、毎度新モデルに買い替えると思うんだが・・・。そんな訳で、G3タワー以来MACとは縁が無い。因みに現在の愛用ラップトップは、Acer R5シリーズ、価格は$400で、4 Core AMD、15インチ ディスプレイ、FullHD。メモリを16GBに載せ替えたので、トータル$560くらい。キーボードとか安っぽいけど、実際安いし、なによりも十分開発にも使えてる、4-5年くらい使ったら買い替えるサイクル。デスクトップは、DAWも兼ねてるので、32GB、25インチ デュアルモニター(こちらもAcerで1枚$100)、8コアAMD、SSD。Virtual Box使っててもサクサクに動いてるので快適、こちらも4-5年でパーツを入れ替えるサイクル。

 

開発環境

OS: Windows 10 (DeveloperモードでUbuntu Bash有効化(英語)
コンソール: Windows Ubuntu Bash
エディター: Sublime text 、Visual Studio Code 乗換え検討中
ブラウザー: Chrome、FireFox、IE Edge
補助ツール: ConEmu (コマンド ウィンドウ タブ化ツール)
Back-end: Virtual Box + Debian 8、時々Windows Ubuntu Bash

 

追記
Visual Studio Code (VSC)への乗換え検討理由

 

ComEmuの設定

Developer モードとUbuntu Bashの有効化はネットにあるので割愛して、ComEmuで、Windows Ubuntu  Bashのタブ化を記録。3つのWindows Bash をタブ化するとこんな感じ。Back-end、Front-end、一般利用という感じで3つにしてある。ComEmu 起動時にこの状態にするには設定をしないといけない。

設定はここから。

Startup → Tasks を開く

デフォルトのタスクは要らないので、1を上書き。Task名は、ubuntu bash。肝心なのは、パラメーター。

Windows Bashのウィンドウを3つ開くので、3回繰り返す。DOSとかPowerShellとか使いたい場合は、他の設定をまねして、それを追加する。

1番目の-cur_console:a は Adminで起動。

2番目の-cur_console:d: で起動時に開きたいフォルダーを指定。この例では、Eドライブの VMBackup\OES というフォルダが開く。

3番目はBashの場所なので、そのままで良いはず。

 

これを保存すれば、次回ConEmu起動時に3つのWindows Ubuntu Bashが起動する。後は通常のBashなので一通りDebian系の事ができる。APTアップデート、nmap、PostgreSQL、Javaコンパイル、SSH Keyファイルの管理、PhantomJSでUnit Test・・・などなど。

何かをインストールする場合は、Linux版のインストールガイドを参照する。なんか動かないのがあったんだが、覚えてないので大した物じゃないんだろう。

ラップトップで完結したい場合は、Back-endとFront-endを立ち上げ。家に居る時は、Virtual Boxでバックエンドを起動して、Front-endはラップトップかデスクトップのBashから、という感じにしている。Git BashとかWindowsなんちゃらっていう選択肢もあるんだが、Linuxのターミナルに比べると使い勝手が悪いので好きじゃないので、使ってない。Windows Ubuntu Bashは、ほぼ完全なLinuxターミナル。Windows環境もそれなりにクリーン?に保てるので良い。なんか必要な時は、Virtual Boxがあるので、そっちでDebianを使えば良いが、今の所、Windows Ubuntu Bashだけで間に合っている。

Front-endの開発としては、Windows Ubuntu Bash から、ng serve でlocalhost:4200 にデバッグ版Webを立ち上げて、普通にWindows上からChrome、FireFox、IEでアクセス。リアルタイムデバッグは、Chromeを使ってるので、開発はほぼChromeでの作業。FireFoxはその他の作業。FireFoxのAddonに、Multi-Account Containers というのがあって、例えば、個人のGitHubアカウントと、会社用のGitHubアカウントを別のタブで同時に開くなんて事ができるので、Office365とか、Slackとかアカウント切り替えて使ってる人には非常に便利なAddonかと思う。

今のVisual Studio Codeってコマンドラインを表示できるようで、もしかしたらConEmuとか要らないかも?と思い。お試し中。Visual Studio Codeのコンソール画面は、スタンドアローンコンソールよりも、なんか微妙に遅い気もするが、ng serve とか git 程度なら問題ないあなーと。

 

1つのShell アカウントで、複数のBitBucket SSHを使う

デフォルトで、SSH Key を作成し、BitBucketに登録した場合、他のBitBucket の SSH コネクションが使用できないので、HTTPで繋いで、Git Pushの度にパスワードを入力なんて事もあるかと思う。そんな場合は、複数の SSH Keyをそれぞれのホスト毎に繋いであげると、複数のBitBucket のSSHコネクションを同時に使用できるようになる。

複数の SSHキーの生成

個人用BitBucketをprivateというKey名で作成。

 

会社用BitBucketとして、company というKey名で作成。因みに、~/.ssh のパーミッションは600。作成した キーファイル(プライベートキー)、.pubファイル(パブリックキー)を400のパーミッション。

 

SSH用Configを作成

~/.ssh/config を作成し、以下のような記述を追加する。ホスト名はGit Configに知らせる為の名前なので、任意で決める。config ファイルは400のパーミッション。

 

git remote の変更

まずは、Gitを使っているディレクトリーへ移動し、現在の接続先を確認。ディレクトリー名、URIは架空。

 

このURIを変更する。git@に続くcompany-bitbucket は、~/.ssh/config に記載した Host と一致させる。

 

BitBucket に SSH キーを登録

.pub にあるパブリックキーをコピーする。cat で表示された、ssh-rsa から loginUserName@ubuntu までコピーする。

 

BitBucket の設定ページへ移動し、Add ボタンをクリックし、ラベルを適当に入力し、Key欄へペースト。

Shellに戻ってGitを試してみる。パスワードが聞かれなかったら設定完了。

 

 

Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です