作ったものを、自分のVPSに載せて公開する(まずブラウザで見えるまで)
手元でしか動かないサイトを、ネット上のVPSに載せて、誰でもURLで見られる状態にするまでの手順。初心者向け・コマンド全部つき。
作ったものが手元のパソコンで動くようになったら、次は「他の人にも使ってもらう」段階。 そのために、ネット上のサーバーに載せる。これがデプロイだ。
この記事では、いちばんシンプルな「静的サイト(HTMLだけのページ)を公開する」を、最後まで手を動かして通す。コマンドは全部のせるし、成功したら何が出るかも毎回書く。まずは「自分のサイトが、ネットのURLで見える」ところまで行こう。
全体像(先に地図)
やることはこの順番。1個ずつやれば大丈夫。
- VPSを借りる(自分専用のサーバーを手に入れる)
- そのサーバーにSSHで入る(遠隔で中に入る)
- Webサーバー(nginx)を入れる(ページを配る係)
- 見せたいHTMLファイルを置く
- ブラウザで開いて確認する
1. VPSを借りる
VPSを1台借りる。ConoHaやさくらのVPSなど、どこでもいい。月額数百円くらいから。
契約するとき、OSは Ubuntu を選んでおくとこの記事どおりに進められる。借り終わると、その画面に「サーバーのIPアドレス」と「rootのパスワード」が出る。この2つを後で使う。
2. サーバーにSSHで入る
「SSH」は、遠くのサーバーの中に、自分のターミナルから入るための仕組み。
自分のターミナルを開いて、これを打つ(<サーバーのIP> は自分のに置き換える)。
ssh root@<サーバーのIP>初めて入るときだけ「接続していい?」と英語で聞かれるので yes と打つ。そのあとパスワードを求められるので、契約画面のパスワードを入れる。
⚠ パスワードを打つとき、画面には何も表示されない(打ってないように見える)けど、ちゃんと入力されてる。そのままEnterで大丈夫。
うまく入れると、行の頭がこんな感じに変わる。ここから先は「サーバーの中」で打ってることになる。
root@your-server:~#3. Webサーバー(nginx)を入れる
nginx(エンジンエックス)は、置いたHTMLを訪問者に配ってくれる係。サーバーの中で、これを打って入れる。
apt update
apt install -y nginx⚠ これはサーバーに新しいソフトを入れる操作。自分のサーバーなので問題ないけど、「サーバーに変更を加えてる」という感覚は持っておく。
入ったか確認する。
systemctl status nginx→ 緑で active (running) と出ていれば、動いてる。確認できたら q を押して抜ける。
この時点で、ブラウザで http://<サーバーのIP> を開くと、nginxの初期ページ(「Welcome to nginx!」)が見えるはず。見えたら、配る係はもう動いてる。
「Welcome to nginx!」が出ない時(よくある)
nginxが active (running) なのにブラウザで何も出ない。これ、あなたの失敗じゃないことが多い。
VPSには「外からの接続を、入り口で止める門番」がいる。防犯のため、最初はほとんどの入り口を閉めてる会社が多い。だから、サーバーの中でnginxがちゃんと動いてても、門の外(あなたのブラウザ)からは届かない。
直し方はサーバーの中じゃなくて、VPSを契約した会社の管理画面にある。管理画面で「セキュリティグループ」とか「接続許可」という名前の設定を探して、「Web」(または「HTTP」)を許可する。ConoHaなら、サーバーの設定画面でセキュリティグループに「Webを許可するやつ」を付けるだけ。
許可したら、もう一度ブラウザで http://<サーバーのIP> を開く。
→ 「Welcome to nginx!」が出たら通った。門番に「Webのお客は通していいよ」と伝えられたってこと。
4. 見せたいHTMLを置く
初期ページを、自分のページに差し替える。nginxが配るのは /var/www/html/ の中身なので、そこに index.html を置く。
まず簡単な確認用に、1行のページを作ってみる。
echo "<h1>はじめてのサイト</h1>" > /var/www/html/index.html→ 何も表示されなければ成功(ファイルが作られた)。
本番のページに差し替えたいときは、手元で作ったHTMLの中身を、同じ /var/www/html/index.html に置けばいい。サーバー上でファイルを編集するなら nano /var/www/html/index.html(保存は Ctrl+O → Enter、終了は Ctrl+X)。
5. ブラウザで確認
ブラウザのアドレス欄に、これを入れて開く。
http://<サーバーのIP>→ さっきの「はじめてのサイト」が出れば、公開成功。手元でしか動かなかったものが、いま世界中からアクセスできる状態になった。 これがデプロイだ。
ここまでで「公開」はできた。ただし正直な但し書き
いま出来たのは、いちばん最初の一歩。まだ2つ足りてない。
- URLがIPアドレスのまま(
http://203.0...)。自分のドメイン(example.comみたいな覚えやすい名前)にする手順は、次の記事で。 - 鍵マークが付いてない(
http://であってhttps://じゃない)。訪問者との通信が暗号化されてない状態。これも次の記事で、無料でHTTPSにする。
そしてもう一つ大事なこと。ここで作ったのは「HTMLを見せるだけ」の、失敗しても被害の小さいサイトだ。でも、もしこの先で人の情報やお金を扱うものを載せるなら、話が変わる。そのときはセキュリティの設定をちゃんと足す必要がある(rootで入りっぱなしをやめる、等)。扱うものが重くなったら、確認も増やす。 手に負えないと感じたら、そこで止まって詳しい人に見てもらう。それも含めて「公開」だ。
詰まったとき、まずこれをやる
途中でエラーが出ても、焦らなくていい。そのエラーの文章を、そのままコピーしてAIに貼る。「これ何が起きてる?どう直す?」と聞けば、たいてい原因が返ってくる。
エラーは、どこを直せばいいかを教えてくれてる文章だ。1個ずつ見ながら進めば、最後まで行ける。
やってみても直らない、別のエラーが出た——そんなときは、その場で相談できます。コードは貼らなくてOK、キーは伏せてくださいね。