2. Linux

Linux基礎

2025.03.21

目次

今回のゴール

サーバーの初期設定・公開鍵認証でのログイン設定・Webサーバーの構築ができるようになる

サーバーの構築

SSHでサーバーにアクセス

コントロールパネルからサーバーのIPアドレスをコピーしておきます。

ターミナル/コマンドプロンプトで以下のコマンドを実行します[IPアドレス]には先ほどコピーしたものを貼り付けます。

ssh root@[IPアドレス]

アクセス時以下のメッセージが表示されます。yesまたはnoを入力することを求めらるのでyesと入力します。

The authenticity of host '*****' can't be established.
ED25519 key fingerprint is SHA256:gUPOR0uWyeWsh09fO74eec128nHn5s6KDAQdRn6lUMI.
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes # ←yesと入力
Warning: Permanently added '****' (ED25519) to the list of known hosts.

一般ユーザーの追加

ユーザーを追加するコマンド

useradd [オプション] ユーザー名

オプションはこちらを参照

以下のコマンドでユーザーを追加します。

useradd -s /bin/bash -m devel

develユーザーのパスワードを以下のコマンドで設定します。

passwd devel
New password:[任意のパスワード]
Retype new password:[↑で入力したパスワード]
passwd: password updated successfully

ユーザーアカウント情報を変更する（ユーザーのセカンダリグループを変更するなど）コマンド

usermod [オプション] ユーザー名

オプションはこちらを参照

develユーザーにsudoを使えるようにグループを追加します。（セカンダリグループにsudoを追加）

usermod -aG sudo devel

develユーザーにsshする際にパスワードログインを禁止する（公開鍵認証でログインする）

rootユーザーからdevelユーザーに切り替えをします。

su devel
cd

鍵を保存しておくフォルダを作成します。

mkdir ~/.ssh

カレントディレクトリを~/.sshに変更します。

cd ~/.ssh

秘密鍵と公開鍵を生成するコマンド

ssh-keygen [オプション]

こちらオプションはこちらを参照

秘密鍵と公開鍵を生成します。

ssh-keygen -f devel_id_rsa

何を入力せずEnterを2回入力してください。

Generating public/private ed25519 key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in devel_id_rsa
Your public key has been saved in devel_id_rsa.pub
The key fingerprint is:
SHA256:0ILu8TTaINugRf8MeORHzgeJUQu/5A0RQ9vNdKdv7zY devel@vm-eac26d88-de
The key's randomart image is:
+--[ED25519 256]--+
|    oo*.  . . .  |
|     * O + . o   |
|  . + % o o .    |
| . * * B     .   |
|  = O O S     o  |
| o B % o     . . |
|. . + =         .|
|               E.|
|               .o|
+----[SHA256]-----+

先ほどのコマンドで2つのファイルが生成されました。

ls
devel_id_rsa  devel_id_rsa.pub
  • 秘密鍵：devel_id_rsa ← クライアントからアクセスする際に必要な鍵
  • 公開鍵：devel_id_rsa.pub ← サーバーで保管しておく鍵

devel_id_rsa.pubをauthorized_keysという名前でコピーします。

cp devel_id_rsa.pub ~/.ssh/authorized_keys

authorized_keysファイルのパーミッションを変更します。

※パーミッションとは、ファイルやディレクトリのアクセス権のこと

chmod 600 ~/.ssh/authorized_keys

authorized_keysのパーミッションが-rw-------になっていることを確認します。

ls -la
-rw------- 1 devel devel  102 Mar 21 00:10 authorized_keys

exit2回でリモートから抜けます。

ファイルを転送するコマンド（クライアント → サーバー/サーバー → クライアント）

scp [オプション] 転送元パス 転送先パス

# クライアント →　サーバー
scp クライアントのファイルパス ユーザー@[サーバーIP/ドメイン]:転送先パス

# サーバー → クライアント
scp ユーザー@[サーバーIP/ドメイン]:ファイルパス 転送先パス

秘密鍵をクライアント側にコピーします。

scp devel@[サーバーのIP]:~/.ssh/devel_id_rsa ~/.ssh
devel@****'s password:[develユーザーのパスワード]
devel_id_rsa                                                                          100%  411     9.3KB/s   00:0

秘密鍵を使用してsshでログインします。

ssh -i ~/.ssh/devel_id_rsa devel@[サーバーIP]

sshログイン時にパスワード認証を禁止するように設定ファイルを変更します。

sudo vi /etc/ssh/sshd_config
PermitRootLogin yes
↓
PermitRootLogin no

#PasswordAuthentication yes
↓
PasswordAuthentication no

変更し終えたらESCキーを押しコマンド入力モードに変更し、:wqを入力しEnterキーを入力してください。

sudo vi /etc/ssh/sshd_config.d/50-cloud-init.conf
PasswordAuthentication yes
↓
PasswordAuthentication no

※vimで検索機能を使うと見つけやすいです。

まず、ESCキーを押してコマンド入力モードにします。以下を入力することで検索することができます。

:/検索文字

以下のコマンドでsshを先起動します。

sudo systemctl reload ssh.service

rootにsshログインできないことを確かめてみます。

ssh root@[サーバーのIP]

パスワードを入力しても以下のメッセージが表示されてログインできません。

Permission denied, please try again

develにパスワード認証でsshログインできないことを確かめます。

ssh devel@[サーバーのIP]

以下のメッセージが表示され、ログインできません。

devel@160.251.211.163: Permission denied (publickey).

Nginxを使ってWebサーバーを構築

develにsshログインします。

ssh -i ~/.ssh/devel_id_rsa devel@[サーバーIP]

まずaptを使用してリポジトリを更新します。

sudo apt update

続いてaptを使用してNginxをインストールします。

sudo apt install -y nginx

80番ポートにアクセスできるようにポート開放をします。

まず、ufwが管理しているアプリケーションを確認します。

sudo ufw app list
Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH
  • Nginx Full → ポート80とポート443の両方を開きます。
  • Nginx HTTP → ポート80を開きます。
  • Nginx HTTPS → ポート443を開きます。

今回は80番ポートを解放したいのでNginx HTTPを指定します。

以下のコマンドで80番ポートを解放します。

sudo ufw allow 'Nginx HTTP'
Rule added
Rule added (v6)

以下のコマンドで80番ポートが解放されているか確認します。

sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
Nginx HTTP                 ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
Nginx HTTP (v6)            ALLOW       Anywhere (v6)

WebブラウザでWebサーバーにアクセスするためにConoHaVPSのセキュリティグループにIPv4v6-Webを追加します。

http://[サーバーIP]にアクセスすると以下のページが表示されます。

Next.jsでWebサーバーを立てる

AsdfのインストールとNodejsのインストール

まずNext.jsのプロジェクトを作成するためにNode.jsの環境構築をまず行います。

今回はasdfというバージョン管理ツールを使用してNode.jsをインストールします。

※asdfのガイドはこちら

まず、asdfのリポジトリをGitHubからクローンします。

git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.15.0

asdfの実行パスを~/.bashrcに追加します。

echo . "$HOME/.asdf/asdf.sh" >> ~/.bashrc
echo . "$HOME/.asdf/completions/asdf.bash" >> ~/.bashrc

~/.bashrcを再読み込みします。

source ~/.bashrc

asdfコマンドが使用できるか確認します。以下のコマンドを入力してください。

asdf list

以下のメッセージが表示されれば大丈夫です。

No plugins installed

Node.jsをインストールするためのプラグインをasdfに追加します。

asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git

インストールするNode.jsのバージョンを確認します。

asdf list-all nodejs
・・・（省略）
23.0.0
23.1.0
23.2.0
23.3.0
23.4.0
23.5.0
23.6.0
23.6.1
23.7.0
23.8.0
23.9.0
23.10.0

今回は表示されている中で最新の23.10.0をインストールします。

以下のコマンドでインストールします。

asdf install nodejs 23.10.0

Node.jsの23.10.0を使用する設定をします。

asdf global nodejs 23.10.0

※特定のプロジェクトのみ使用するバージョンを変更・指定した場合は以下のコマンドを使用します。

asdf local nodejs バージョン

以下のコマンドを実行してバージョンの隣に*が表示されていれば大丈夫です。

asdf list
nodejs
 *23.10.0

一応npm -vの実行でも確認できます。

Next.jsのプロジェクト作成

以下のコマンドでNext.jsのプロジェクトを作成します。

この資料ではプロジェクト名をsample=web-appとしていますが、任意の名前を付けてください。

npx create-next-app@latest sample-web-app

使用するツールを選択する際にすべてデフォルトを選択します。

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

カレントディレクトリを作成したプロジェクトに変更します。

cs sample-web-app

ポート開放

Next.jsはデフォルトで3000番ポートを使用します。そのため、ufwコマンドで3000番ポートを解放します。

sudo ufw allow 3000

以下のコマンドでufwの状況（解放されているポート）を確認します。

sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
Nginx HTTP                 ALLOW       Anywhere
3000                       ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
Nginx HTTP (v6)            ALLOW       Anywhere (v6)
3000 (v6)                  ALLOW       Anywhere (v6)

3000が追加されていれば大丈夫です。

ufwのみ設定した状態だとConohaVPS側のセキュリティグループではじかれてしまうのでNext.js用のセキュリティグループを作成しサーバーに設定します。

まず、セキュリティグループを作成します。

ConoHaのコントロールパネルのサイドバーから「セキュリティ」→「セキュリティグループ」を開きます。

右上にある「セキュリティグループ」ボタンをクリックし、セキュリティグループ名にIPv4v6-nextjsを入力し、保存ボタンをクリックします。

IPv4v6-nextjsセキュリティグループの設定をします。

それぞれの設定をいかに変更します。

作成したセキュリティグループをサーバーに設定します。

以下のコマンドを実行してdev環境でsample-web-appのサーバーを立ち上げます。

npm run dev

サーバーが立ち上がったことを確認したらhttp://[サーバーIP]:3000にアクセスしてみましょう。

Next.jsアプリを80番ポートでアクセス

Next.jsアプリのサーバーは3000番ポートのためhttp://[サーバーIP]:3000とurlを指定しなくてはいけません。そこでhttp://[サーバーIP]と指定してもNext.jsのアプリにアクセスできるようにします。

この時使用するものとして「リバースプロキシ」というものがあります。

この「リバースプロキシ」は受け口のようなもので80番ポートでアクセスしたら3000番ポートのアプリにアクセスするというものです。

Nginxにもリバースプロキシをする機能があるので設定していきます。

sudo vi /etc/nginx/conf.d/nextjs.conf
server {
        listen 80;

        location / {
                proxy_pass http://localhost:3000;
                proxy_set_header Host $http_host;
        }
}

:wqでファイルを保存しvimを終了します。

次に/etc/nginx/nginx.confを修正します。

sudo vi /etc/nginx/nginx.conf
user www-data;
worker_processes auto;
pid /run/nginx.pid;
error_log /var/log/nginx/error.log;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}

http {
# ・・・（省略）
        ##
        # Virtual Host Configs
        ##

-        # include /etc/nginx/conf.d/*.conf;
+        include /etc/nginx/conf.d/*.conf;
-        include /etc/nginx/sites-enabled/*;
+        # include /etc/nginx/sites-enabled/*;
}


# ・・・（省略）

※行の先頭に-がついているものは削除対象の行。+がついているものは追加対象の行。

:wqでファイルを保存しvimを終了します。

以下のコマンドで作成したnextjs.confと修正したnginx.confを再読み込みさせます。

sudo systemctl reload nginx.service

http://[サーバーIP]にアクセスすると以下のページが表示されます。

※Nextjsのサーバーを立ち上げていないためです。

Next.jsで作成したsample-web-appをビルドします。

npm run build

ビルドが終わったら以下のコマンドでサーバーを起動させます。

npm run start

http://[サーバーIP]にアクセスすると以下のページが表示されます。

補足

tmuxを使用して実行

tmuxで新しいセッションを作成します。

tmux new -s [セッション名]
tmux new -s nextjs

tmuxのnextjsセッションの中でnum run startを実行します。

tmuxのセッションを抜けるにはCtrl + b入力後dを入力します。

Next.jsのサーバーを停止したい場合再度tmuxのnextjsセッションの中でCtrl + Cを2回入力します。

tmux a -t [セッション名]
tmux a -t nextjs

tmuxのセッションを削除するには以下のコマンドを実行します。

tmux kill-session -t [セッション名]
tmux kill-session -t nextjs

バックグランド実行

npm run startをバックグランド実行したい場合

nohup npm run start &

jobsコマンドとfgコマンドを使用してバックグランド実行からフォアグランド実行に変更しNext.jsのサーバーを止める場合

jobs
[1]+  Running                 nohup npm run start &
fg 1

Ctrl + C2回入力

psコマンドとkillコマンドを使用してPIDを指定してプロセスをキルしNext.jsのサーバーを止める場合

ps -f
UID          PID    PPID  C STIME TTY          TIME CMD
devel      18484   18483  0 18:31 pts/0    00:00:00 -bash
devel      20648   18484  0 19:27 pts/0    00:00:00 npm run start
devel      20783   20648  0 19:27 pts/0    00:00:00 sh -c next start
devel      20784   20783  0 19:27 pts/0    00:00:01 next-server (v15.2.3)
devel      20813   18484 99 19:32 pts/0    00:00:00 ps -f

CMDがnpm run start、sh -c next start、next-server (バージョン）の行ののPIDを見つける

kill -9 20648 20783 20784

その他

この資料で解説はしませんが、Systemd（systemctl）やSupervisorを使用してNext.jsのサーバーをデーモン化する方法もあります。

Nginxにエラーページを追加

リバースプロキシを使用したことによって、Next.jsのサーバーが起動していない場合は502エラーが発生してしまいます。

そこで、502エラーやそれ以外のエラーが発生した場合自作したエラーページを表示させるようにします。

まずは、エラーページ用のhtmlを作成します。

sudo vi /var/www/html/custom_notfound.html

htmlの中身は以下をコピーして貼り付けをしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Not Found</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="text-center p-8 bg-white rounded-2xl shadow-lg max-w-md">
    <h1 class="text-6xl font-bold text-red-500 mb-4">Error</h1>
    <h2 class="text-2xl font-semibold text-gray-800 mb-2">ページが見つかりません</h2>
    <p class="text-gray-600 mb-6">
      お探しのページは存在しないか、移動された可能性があります。
    </p>
  </div>
</body>
</html>

次にNginxのnextjs.confにエラー時の設定を追加します。

sudo vi /etc/nginx/conf.d/nextjs.conf
server {
        listen 80;

        # 403, 404, 500, 502, 503エラーが発生した場合すべて404エラーとして処理を/custom_notfound.htmlのuriに変更する
+        error_page 403 404 500 502 503 =404 /custom_notfound.html;

        # uriが/custom_notfound.htmlの場合の処理
+        location /custom_notfound.html {
+                root /var/www/html;
+                internal;
+        }

        location / {
                proxy_pass http://localhost:3000;
                proxy_set_header Host $http_host;
        }
}

追加した設定を読み込ませます。

sudo systemctl reload nginx.service

Next.jsのsample-web-appのサーバーが起動していないことを確認してhttp://[サーバーIP]にアクセスすると以下のページが表示されます。

エラーページが確認できたらNext.jsのsample-web-appのサーバーを起動していつも通りに表示されるか確認します。

npm run start

© 教置き場 All rights reserved.