第8回 社内勉強会 「サーバーを構築してWebページを公開してみよう」

https://github.com/wemotion-inc/nginx-sample

Transcript

1. サーバーを構築して
 Webページを公開してみよう
 第8回 社内勉強会
 2023/03/04

2. SSH接続

3. SSHとはSecure Shellの略で、
 リモートのコンピューターと通信するためのプロトコルです。
 
 認証の仕組みは「パスワード認証方式」と「公開鍵認証方式」の2種類あり、
 設定の難易度はパスワード認証方式の方が簡単ですが、セキュリティ的には
 公開鍵認証方式の方が安全となります。
 sshとは

4. OS標準のクライアント
 Windows: PowerShell / Mac: Terminal
 
 サーバーへの接続方法
 ssh {UserName}@{HostName} -p {Port}
 
 UserName: rootなど接続時のユーザーネーム 
 HostName: 接続サーバーのIPアドレス等 
 Port: 接続ポートが指定されている場合は-pでポート指定 
 sshの使い方
 例
 ssh root@123.456.789.0 

5. ポートとはネットワーク接続された機器に出入りする際の接続口で、
 各ポートには番号が割り振られている。
 
 代表的なポート
 
 Portとは
 Port番号 用途 80 HTTPで使用されることが多（ブラウザから httpアクセス） 443 HTTPSで使用されることが多い（ブラウザから httpsアクセス） 20 FTP データ転送で使用されることが多い
6. サーバーのスペック
 - IP: 各自違います
 - CPU: 1Core
 - メモリ: 512MB
 - SSD: 30GB
 - OS: CentOS Stream9
 - rootパスワード: 各自違います
 ハンズオンで使用するサーバー
 ConohaVPSを使用
 時間課金で1,000円弱/月〜 
 参考: https://www.conoha.jp/vps/ 

7. サーバーでの作業

8. サーバーを構築してWebページを公開し、
 ブラウザからhttpでアクセス出来るようPort解放を行う
 
 1. SSHでサーバーに入る
 2. Nginxのインストール
 3. Nginxの設定
 4. 公開するページのHTMLをローカルPCからサーバーに転送（scp）
 5. httpポート解放
 6. ブラウザからのアクセス確認
 サーバーでの作業概要

9. 付与しているサーバーのIPを使用し、rootユーザーでSSH接続してください。
 
 ssh root@IPAddress
 
 接続が成功しているか確認する際は、 hostname コマンドがオススメです。
 実行してサーバーIPが表示されれば接続成功となります。
 
 hostname
 
 SSHでサーバーに入る
 ※ 実務で使用する際は、 
 rootユーザーの認証, パスワード認証は禁止し、 
 ssh時には専用ユーザー&公開鍵での認証を推奨します 

10. Nginxは現在最も使用されているOSSのWebサーバーです。
 WebサーバーではApacheも有名でそれぞれに得意不得意があります。
 
 ※ Webサーバーとは、リクエストに応じてデータをレスポンスするサーバー 
 
 
 Nginxとは
 公式: https://nginx.org/en/
 日本公式: https://www.nginx.co.jp/

11. CentOSでは一般にパッケージインストールに yum コマンドを使用します。
 
 必要なパッケージのインストール
 yum install yum-utils
 yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
 yum install http://rpms.remirepo.net/enterprise/remi-release-7.rpm
 
 確認されたら y を入力してEnter
 Nginxのインストール その1
 ※ サーバーでの作用になります 

12. vimでNginxインストール用の定義を作成します。 
 
 vi /etc/yum.repos.d/nginx.rep o
 
 記載内容: https://github.com/wemotion-inc/nginx-sample/blob/main/nginx.repo 
 
 vimの操作方法
 編集方法: i を押すとINSERTモードで編集可能になります 
 保存方法: : を押してコマンドモードにし、 wq と入力してEnterで保存して終了 
 Nginxのインストール その2
 ※ サーバーでの作用になります 

13. Nginxをインストールする
 yum-config-manager --enable nginx
 yum install nginx
 
 バージョンの確認（バージョンが表示されればインストール成功）
 nginx -version
 Nginxのインストール その3
 ※ サーバーでの作用になります 

14. サーバー再起動時にも自動で起動されるようにする
 systemctl enable nginx
 
 Nginxの起動
 systemctl start nginx
 
 停止させる場合は stop / 起動状態の確認は status
 Nginxのインストール その4
 ※ サーバーでの作用になります 

15. デフォルトの設定内容を確認
 cat /etc/nginx/nginx.conf
 
 
 http中のserver設定を見ると
 listen: 80ポート
 root: リクエスト時に参照するルートディレクトリ（公開ファイルの配置場所） 
 
 Nginxの設定
 ※ サーバーでの作用になります 

16. sshで接続したサーバーから接続解除する際は、
 exit で接続解除しローカルに戻ることが可能です。
 
 公開するHTMLを用意
 https://github.com/wemotion-inc/nginx-sample/blob/main/index.html
 上記のHTMLを index.html でローカルPCのDesktopに保存します。
 サーバーから接続解除し、公開するHTMLを用意
 ※ ローカルでの作用になります 

17. ローカルとサーバーでファイルをやりとりする場合は、
 一般的には scp コマンドを使用します。
 
 使用方法
 scp {FileName} {UserName}@{HostName}:{FilePath}
 
 例（実行前に cd ~/Desktop でDesktopに移動してください） 
 scp index.html root@123.456.789.0:/root
 
 HTMLをサーバーに転送
 ※ ローカルでの作用になります 

18. HTMLの転送が完了したら再び ssh でサーバーに接続し、
 ファイルが転送されているか確認しましょう。
 
 ls コマンドで index.html が表示されれば成功しています。
 
 確認ができたらNginxのルートディレクトリに index.html をコピーします
 cp index.html /usr/share/nginx/html/index.html
 ※ デフォルトのhtmlをoverwriteするため y で回答
 サーバーでファイル確認
 ※ サーバーでの作用になります 

19. ブラウザのURLバーにIPアドレスをhttpで入力してアクセスしてみましょう！
 
 http://IPAddress
 
 ポート解放をしていないため、
 画像のようにアクセスが失敗します。
 ページの確認
 ※ ローカルでの作用になります 

20. CentOS 9では一般的には firewall-cmd を使用してPortの管理を行います。
 
 解放状況の確認
 firewall-cmd --list-all
 
 portsが設定されていないことが分かります。 
 解放状況の確認
 ※ サーバーでの作用になります 

21. 以下のコマンドでhttpで80ポートを解放し、reloadで反映します。
 firewall-cmd --add-port=80/tcp --zone=public --permanent
 firewall-cmd --reload
 
 設定確認で 80/tcp が追加されています。
 firewall-cmd --list-all
 httpポートの解放
 ※ サーバーでの作用になります 

22. 再度ブラウザのURLバーにIPアドレスをhttpで入力し、
 アクセスしてみましょう！
 
 http://IPAddress
 
 ページが表示されたら成功です！
 本日扱った主要技術の復習を各自行いましょう。
 再度ページの確認
 ※ ローカルでの作用になります