8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Developer ことはじめ】Visual Studio CodeからOCI Compute VMに接続する

Posted at

はじめに

M-1が終わり、いつかのクリスマスが過ぎ、年末年始のゆっくりとした時間を過ごしていると、新年に想いを馳せ、新しいことに挑戦してみようという気持ちが湧いてきたりするものです。

ITエンジニアの皆さまなら、今年こそは自分で考えたアプリを作ってみようかなーなんて一度は思ったことがあるはず。

だがしかしbut、始めようにも環境構築がめんどくさい!何もせずに そして伝説へ… なんてこともあるはず。

OCIのコンソールから立ち上げられるCloud Shellからでも操作は可能ですが、ファイルの編集がちょっと面倒だったり、機能が限られていたりします。そこで今回は、プラグインリッチで、IDE のデファクトスタンダードである Visual Studio Code を使用します。

というわけで、Developer ことはじめとして、 ローカルPC の Visual Studio Code から OCI Compute VM へ接続する手順について解説します。

本記事のゴール

ローカルの Visual Studio Code から、OCIのCompute VMにSSH接続して開発環境を整える。

image.png

前提条件

・ローカルPCはWindowsを利用しています。
・インターネットから22ポートでCompute VMにアクセスできるネットワークです。

手順

  1. Compute VMの作成
  2. VSCode のインストール
  3. Remote SSHの設定
  4. いざ接続

1. Compute VMの作成

OCIの Compute VM を建てていきます。
勘のいい方はお気づきかと思いますが、Compute VM でなくてもいいのです。
Amazon EC2やAzure Virtual Machine、クラウド上の仮想マシンのサービスであればOKです。
OCIを選んだ理由はただひとつ、他のクラウドよりコスパよくリソースが使えるからです。

OCI Compute VMの作成方法は、下記の記事をご参照ください。

構築のポイントは、下記の通りです。

・Compute VMをパブリックサブネットに置くこと
・Compute VMを置いたパブリックサブネットはInternet Gatewayとのルートがあり、インターネットに接続できること
・OSはOracle Linux8を選択。

2. VSCode のインストール

下記ページにアクセスし、VSCodeをダウンロードします。

ダウンロード後、インストールプロセスを進めます。
「次へ」ボタンを連打してインストールを実行します。

image.png

インストール後、VSCodeを起動し、「ようこそ」画面が出てくることを確認します。

image.png

3. Remote SSHの設定

3-1. Remote SSHのインストール

VSCode 画面左のナビゲーションペインから、拡張機能を開きます。
Remote SSHをインストールします。

image.png

3-2. 秘密鍵の配置

1で作成した秘密鍵ファイルに権限を付与します。
権限付与については、下記の記事を参考に行いました。

上記で権限を付与した秘密鍵ファイルを、Windows User階層下に置きます。

C: > <User名> > .ssh > XXX.key

3-3. configファイルの設定

Remote SSH をインストールすると、画面左下に >< アイコンが表示されます。これを押下します。

image.png

すると、画面上の検索欄に「ホストに接続する」とメニューが表示されるので、これを押下します。

image.png

SSHホストを構成する を押下します。

image.png

configファイルが表示されるので、これを選択します。

image.png

configファイルを編集し、下記を記載します。

Host <任意の名前>
  HostName XXX.XXX.XXX.XX (パブリックIPアドレス)
  IdentityFile C:\Users\<User名>\.ssh\<秘密鍵名>.key
  User opc
  Port 22

初回接続時には、下記のリファレンスが役立ちました。

4. いざ接続

画面左下の>< アイコンを押下します。
画面上の検索欄に「ホストに接続する」とメニューが表示されるので、これを押下します。
3-3でConfigファイルで設定した、Host(任意の名前)を押下します。

新規で画面が立ち上がり、画面右下に接続を開始した旨のメッセージが表示されます。

image.png

接続に成功すると、画面左下のSSHアイコンにホスト名が表示されるようになります。

image.png

表示からターミナルを選択すると、接続先のインスタンスのユーザー名@インスタンス名が確認でき、無事インスタンスに接続できていることがわかります。

まとめ

何するにせよ、下準備が大切。
Developerことはじめとして、新年のDev Lifeに備えましょう。よいお年を!

8
2
0

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
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?