0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-10-05

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

LinodeのMarketplaceからLAMPをインストール

image.png
以下、LAMP Setupに必要な情報を入力

image.png

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

image.png
image.png

作成されたLinodeの仮想マシンIPアドレスを確認しておきます。
image.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

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

MacからVNCサーバーへ接続

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

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

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

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

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

image.png

VNCに接続するためのパスワードを入力します。
image.png

Ubuntuデスクトップの画面がでれば成功
image.png

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

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

image.png

ターミナルを起動し、VSCodeをインストールします

cd ~/Downloads
sudo apt install ./code_1.71.2-1663191218_amd64.deb

image.png

VSCodeの起動
image.png

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

image.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関連など開発者向けの記事を記載しております。

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?