LinodeをGUI化してVSCodeとChromeを使ってみた

Webサイトの構築について勉強をするため、LinodeにLAMP環境を構築しました。
＊LAMP=(Linux,Apache,MySQL,PHP)
サーバーの操作にはターミナルでの操作が基本ですが、サーバー上でも使い慣れた環境のVSCode、Chromeを使いたいので、UbuntuデスクトップをインストールしてGUI化し、VNCを使ってリモートデスクトップ化してみました。

## LinodeのMarketplaceからLAMPをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/17dff7f4-c54b-f03a-c514-cdb72351c10e.png)
以下、LAMP Setupに必要な情報を入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/40d99c61-c188-2ed5-031e-067f5fef25a1.png)

今回は、sudoできるユーザーを作成します。これはのちほど作成した仮想マシンにログインする際のユーザーです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/a68e99c0-e4d3-3d1c-a1e1-41b55a86b38f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/6c220c9d-7bbc-77a4-adc0-41c459a29390.png)

作成されたLinodeの仮想マシンIPアドレスを確認しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/4b42c45d-b2c2-1ec1-9206-64b274c85213.png)

## GUI化に使用した環境
Linode仮想マシン（Ubuntu20.04）
VNCサーバー：tigervnc(1.10.1+dfsg-3)
VNCクライアント：MacのFinderから画面共有機能を利用
Linodeの仮想マシンとMacの間はSSHトンネルを作成しセキュア通信を実現


## Linodeの仮想マシンへssh接続
sudoできるユーザーでLinodeへssh接続
```
ssh linode@xxx.xxx.xxx.xxx
```
Ubuntuパッケージを更新
```
sudo apt update
```
LAMP(Linux,Apache,MySQL,PHP)のバージョンを確認

Linux 
```
lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 20.04.5 LTS
Release:	20.04
Codename:	focal
```
Apache
```
apache2 -v
Server version: Apache/2.4.41 (Ubuntu)
Server built:   2022-06-14T13:30:55
```
MySQL

```
sudo mysql --version
mysql  Ver 8.0.30-0ubuntu0.20.04.2 for Linux on x86_64 ((Ubuntu))
```

PHP
```
php -v
PHP 7.4.3 (cli) (built: Aug 17 2022 13:29:56) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.3, Copyright (c), by Zend Technologies
```

## VNCサーバーの構築

Ubuntuデスクトップをインストール（デスクトップの種類はxfceなどもありますが、デフォルトのGNOMEにします）
```
sudo apt install ubuntu-desktop gnome-panel gnome-settings-daemon metacity nautilus gnome-terminal
```

VNCサーバーのインストール
```
sudo apt install tigervnc-standalone-server
```

vncserverを実行
```
vncserver :1
```
vncserver :1　を実行すると、以下のようにVNC接続時のパスワードを設定することができます
パスワードは、~/.vnc/passwdファイルに暗号化され保存されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/09a8c0e1-d8a8-4fc9-5928-afd066715a7a.png)


これでLinodeへのVNCサーバーの環境構築が完了しました。

## MacからVNCサーバーへ接続
VNC接続をセキュアにするため、SSHトンネルを作成します。
Macでターミナルを起動し、以下のコマンドを実行します。

```
ssh -L 5902:localhost:5901 [user]@[LinodeのIPアドレス]
```

これで、VNCサーバーの5901ポートがMacの5902に転送されるようになります。

<details><summary>上記コマンドの詳細</summary><div>
[user]にはsudoできるユーザーを利用
5902はMacの任意のポート番号を指定します。
5901はVNCサーバーのポート番号になります。
VNCサーバーでVNCサービスを起動する際に　vncserver :1 にしましたが、
 ”:1” はDisplay番号を意味します。　
VNC本来のポートは5900のため、VNCサーバーのポート番号は5900+Display番号（：1）=5901になります。
</div></details>


MacのFinderで、「移動（Go)」＞「サーバーへ接続（Connect to Server)」と選択し、
　vnc://localhost:5902　を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/2e6de34f-e49d-1ab1-0908-3f6a5e936b8a.png)

VNCに接続するためのパスワードを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/2910cd49-ae5d-c411-a64d-9aa26daa97a0.png)

Ubuntuデスクトップの画面がでれば成功
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/e163f85f-bc0b-bb2e-05db-7f80e547ca96.png)

UbuntuのデスクトップGUIでVSCodeとChromeをインストール

UbuntuのGUI上で左上のActivitiesをクリックし、firefoxを起動します。
VSCodeのウェブサイト(<https://code.visualstudio.com/>)からUbuntu用の.debファイルをダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/ce29233f-492e-509b-f5ef-c5b616269bed.png)

ターミナルを起動し、VSCodeをインストールします
```
cd ~/Downloads
sudo apt install ./code_1.71.2-1663191218_amd64.deb
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/0f5e8b24-c067-2256-10fb-a21d37ac0089.png)

VSCodeの起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/1fd19bbe-56d1-39f0-bf7e-6b2b9f784c5f.png)

同様にGoogle検索でChromeを検索し、.debファイルをダウンロード、aptでインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820036/9638e2d5-f65d-4d1e-ff85-13f065b2e438.png)


最後に、VNCサーバーを停止する際には、VNCサーバーから以下のコマンドを実行します。
```
vncserver -kill :1 
　Killing Xtigervnc process ID xxxx... success!
```
## まとめ

Webサイトの構築、コンテンツ配信について勉強をするためにLinode上でLAMPを構築し、使い慣れた環境のVSCodeとChromeを使うためLinuxをGUI化してみました。Linodeの仮想マシンを東京リージョンに作成したので、インターネット経由でも問題なく使えました。

# Linodeとは

Linode (https://www.linode.com/) は Akamaiが提供するIaaS (Infrastructure as a Service) プラットフォームプロバイダーのサービスです。リノードと発音します。
Akamaiは2022年2月にLinode社の買収を発表しました。
https://www.akamai.com/ja/newsroom/press-release/akamai-to-acquire-linode
クラウドコンピューティングをよりシンプルに、手頃な価格で、誰もが利用できるようにすることで、イノベーションを加速することができます。
https://www.linode.com/ja/alternative-cloud-provider/

## 関連記事

アカマイ・テクノロジーズ合同会社のQiitaではLinode関連など開発者向けの記事を記載しております。

https://qiita.com/organizations/Akamai