Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Paiza CloudとVS Codeで快適な環境を作ろう! / Let's create a comfortable development environment with Paiza Cloud and Visual Studio Code !

Paiza CloudとVS Codeで快適な環境を作ろう! / Let's create a comfortable development environment with Paiza Cloud and Visual Studio Code !

プログラミング学習で躓きやすい環境構築。Paiza CloudとVisual Studio Codeで手軽に使いやすいリモート開発環境を構築します。ローカルを汚したくないという方にも最適です。

D99940a5dd3c76114ff8890491981eb9?s=128

Hiroyuki Mito

August 28, 2019
Tweet

More Decks by Hiroyuki Mito

Other Decks in Programming

Transcript

  1. Paiza CloudとVS Codeで 快適な環境を作ろう! ー簡単、超速、高機能ー

  2. PaizaCloud+VisualStudioCodeのメリット 1.ローカル環境を汚さない 2.Visual Studio Codeの補完機能が使用できる 3.拡張機能を使用することができる 4?イケてる気持ちになれる!

  3. 事前準備 手元のLinux、Mac、Windowsがインストールされた端末に “Visual Studio Code”をインストールしましょう! azure.microsoft.com/ja-jp/products/visual-studio-code/ VPNは使えませんので使用している場合は切ります。 ※セキュアな環境で行いましょう

  4. ①PaizaCloudへ登録し、コンテナを作成 PiazaCloudに会員登録をしましょう! 試すだけなら無料でも出来ます。 ※無料プランは24時間で環境削除 登録をしたら右のようになるので、 言語やFW、データベース等を選択し、 「新規サーバーを作成」をクリック! ※常時起動はベーシックプランのみ。

  5. ②sshのキーを作成 $ ssh-keygen Enter...Enter… Enter… $ cat ~/.ssh/id_rsa.pub

  6. ③PaizaCloudに接続出来るようにする メニューから “SSH設定”を開く 公開鍵を貼り付けて “Save”ボタンを クリック メニュータブからSSH設定

  7. ④VS Codeに拡張機能を追加する MS謹製の“Remote Development”を使用します。 メニューバーの赤い丸から“Extensions”を開き 検索窓から探してインストールしましょう!

  8. ④VS Codeに拡張機能を追加する 青い丸の中にあるアイコンは 追加されていますか? 赤い丸の中のメニューバーの 左下は緑色(中が“><”)に なりましたか?

  9. ⑤SSHの設定を行う F1キーでコマンドパレットを開き、 “Remote-SSH: Open Configuration File” を実行しましょう。

  10. ⑤SSHの設定を行う ファイルの場所は Win: C:\Users\ユーザー\.ssh\config Mac: /Users/ユーザー名/.ssh/config Host お好きな名前  HostName SSHコマンドで出てきた

      .paiza-user.cloud  User ubuntu(ユーザー名)  Port SSHコマンドから-pの後の数値  IdentityFile 秘密鍵の保存先   ~/.ssh/id_rsa 再びコマンドパレットから“Remote-SSH: Connect to Host”を実行します
  11. ⑥接続確認! さあ、最終確認です!ターミナルを立ち上げて作業します $ uname -a $ php -v(ruby -v, python

    -v)と打ち込んでみましょう!
  12. これで全て完了です! VS Codeに好みの 拡張機能を追加する等して 使い倒しましょう!! 他のCloud IDEや 各社のVPSでも 同じことが可能です