入門サーバサイドプログラミング

デジクリで2021年3月5日に開催した入門サーバサイドプログラミング講座の講座資料です。

講座で利用したサンプルコードは次のリポジトリにまとまっています。適宜ご活用ください。
https://github.com/SIT-DigiCre/serverside-primer

Transcript

1. 入門 サーバサイドプログラミング @cordx56 cordx.net 1
2. 本講座の概要 ❖ 本講座はサーバサイドプログラミング入門講座です ❖ 受講者の想定としては ➢ サーバサイドプログラミングを始めてみたいけど何から始めていいかわからない ➢ サーバプログラムがどうやって動いているのか見てみたい ➢ CUIでもっと応用的なプログラミングをしてみたい ➢ そもそもサーバって何？ ➢ などなど ❖ 環境としてはUbuntuを想定しています 2
3. 事前準備 ❖ 次のページを参考に、Ubuntuをインストールしてください ➢ https://docs.microsoft.com/ja-jp/windows/wsl/install-win10 ➢ 今回はWSL1のみで大丈夫です ❖ Ubuntuを起動できたら、次のコマンドを入力してください $ sudo apt update $ sudo apt install emacs git $ git clone https://github.com/SIT-DigiCre/serverside-primer.git ~/serverside-primer ❖ コピペする場合、$は含めず、一行ずつコピーして実行してください ❖ パスワードの入力を求められた場合は、入力してください 3
4. 目次 ❖ サーバとは？ ❖ 環境構築基礎 ❖ サーバプログラムの実行 ❖ Web技術を学ぼう ➢ URL ➢ リクエストメソッド ➢ セッション管理 ❖ 基本課題 ❖ 発展課題 ❖ さいごに 4
5. サーバとは？ ❖ サーバあるいはサーバー（英: server）は、サービスを提供するコンピュータ である。コンピュータ分野のクライアントサーバモデルでは、クライアント からの要求に対して情報や処理結果を提供する機能を果たす側の コンピュータやソフトウェアを指す。 ➢ Wikipedia「サーバ」より引用 ❖ 現在のコンピュータネットワークは基本的にサービスを提供するサーバと サービスを利用するクライアント、という考え方のもと、様々な機能を 実現している ❖ 皆さんのパソコンは特に何もしなければクライアントとして サーバの提供するサービスを利用する側になる ➢ Google検索はGoogleのサーバが提供するサービス、我々はクライアント 5
6. サーバとは？ ❖ サーバとなるコンピュータはサーバプログラムを実行することで、 クライアントにサービスを提供している ➢ サーバプログラムを実行しているコンピュータのことをサーバと呼ぶ ❖ サーバに使うコンピュータも私達が普段使っているコンピュータと同じ ようなアーキテクチャを利用している ➢ つまり皆さんのパソコンもサーバプログラムを実行することでサーバとして使える ➢ 勿論Windows上でもサーバプログラムを実行できる ▪ 環境構築さえすれば 6
7. 環境構築基礎 ❖ ここからは広くサーバ用途で用いられているLinuxでの環境構築のお話 ❖ サーバソフトウェアを動かすためのツールをインストールする ❖ 今回はUbuntuの環境を想定 ➢ 最も広く使われているディストロのひとつ ❖ 基本的にはパッケージマネージャを使ってインストールをする ➢ 特別な理由がなければこれが楽 7
8. 環境構築基礎 ❖ Python実行環境のインストール $ sudo apt install python3 python3-pip ❖ これだけ ❖ 本講座中ではFlaskというフレームワークを使うのでこちらもインストール $ pip3 install flask 8
9. 環境構築基礎 ❖ PHPサーバ環境のインストール $ sudo apt install php ❖ これだけ ❖ 自動でApache2などのサーバ環境もインストールされる ➢ 依存関係が設定されているため ❖ 実行時にはApache2のサービスを起動しておく必要がある 9
10. 環境構築基礎 ❖ Node.js実行環境のインストール $ sudo apt install nodejs npm ❖ これだけ ❖ 追加でパッケージ群をインストールする $ cd ~/serverside-primer/nodejs $ npm install 10
11. 環境構築基礎 ❖ Go言語コンパイル環境のインストール $ sudo apt install golang ❖ これだけ 11
12. 環境構築基礎 ❖ 実際はもっと複雑なインストール手順を踏むこともある ➢ バージョンを厳密にしたほうがいい、最新のものを使いたいなどの理由から ソースコードをビルドしてインストールする場合 ➢ 最近だと、Dockerだけインストールしておいて、あとは必要なイメージを pullして使うなりDockerfileを書いて環境を構築して使うなり、というので 環境構築を済ませる例もある ❖ 特別な理由がない限りはaptなどのパッケージマネージャを使った インストールが楽なので、これで十分でしょう ➢ 興味がある人はDockerをインストールして使ってみるのもよし ▪ Windowsの場合はWSL2必須です 12
13. サーバプログラムの実行 ❖ ここでは既存のプログラムを利用し、サーバを稼働させてみましょう 13
14. 実行 - Python & Flask ❖ Pythonサーバスクリプトを実行してみよう $ cd ~/serverside-primer/python $ ./sample1.py ❖ 準備が終わったら、Webブラウザで http://localhost:8000/ にアクセス ❖ 実行の停止はCtrl+Cで行えます 14
15. 実行 - PHP & Apache2 ❖ Webページ用の公開ディレクトリにPHPファイルをコピーしよう $ cd ~/serverside-primer/php $ sudo cp ./sample1.php /var/www/html ❖ 実行に必要なサービスを起動しよう $ sudo service apache2 start ❖ 上記コマンドでコピーを終えたら、Webブラウザで http://localhost/sample1.php にアクセス 15
16. 実行 - Node.js & Express ❖ Node.jsサーバスクリプトを実行してみよう $ cd ~/serverside-primer/nodejs $ node sample1.js ❖ 準備が終わったら、Webブラウザで http://localhost:8000/ にアクセス ❖ 実行の停止はCtrl+Cで行えます 16
17. 実行 - Go言語 & Gin ❖ Go言語サーバスクリプトをコンパイル&実行してみよう $ cd ~/serverside-primer/go $ go build $ ./serverside-primer ❖ 準備が終わったら、Webブラウザで http://localhost:8000/ にアクセス ❖ 実行の停止はCtrl+Cで行えます 17
18. Web技術を学ぼう ❖ ここからはWeb関連技術について少し学んでいきます ❖ ここからはPythonを使います 18
19. URL ❖ 次のURLを例に、URLの構成を見ていこう http://localhost:8000/hello?name=world ❖ httpの部分はプロトコルを表す ➢ httpの他に、https、ftpなどが存在する ❖ localhostの部分はFQDNを表す ➢ 接続先のコンピュータの名前という認識で OK ❖ 8000の部分はポート番号を表す ➢ ポートを使い分けることで、一つのコンピュータに複数の役割をもたせることができる ❖ /helloの部分はパスを表す ➢ 要求するディレクトリまたはファイルの名前 19
20. URL ❖ 次のURLを例に、URLの構成を見ていこう http://localhost:8000/hello?name=world ❖ ?name=worldの部分はクエリパラメータを表す ➢ サーバに追加で情報を送ることが可能 ➢ sample1では、このパラメータに名前を渡すことで名前を表示した 20
21. URL ❖ python/sample1.pyを編集して、URLの変更を行ってみよう $ cd ~/serverside-primer/python $ emacs sample1.py ❖ 次の行を変更します @app.route(“/”) ❖ 次のように変更します @app.route(“/hello”) 21
22. URL ❖ サーバを起動してWebブラウザからアクセスしてみよう $ ./sample1.py ❖ Webブラウザで http://localhost:8000/hello にアクセスしてみてください ❖ 先ほど書き換えたのはURLのパスの部分 ➢ 自由に書き換えて、Webブラウザからアクセスできるパスが変わるのを確認してください 22
23. URL ❖ クエリパラメータでサーバに情報を渡してみよう $ ./sample1.py ❖ Webブラウザで http://localhost:8000/hello?name=world に アクセスしてみてください ❖ 書き換えたのはURLのクエリパラメータの部分 ❖ ?name=world で、nameに対してworldという値を与えている ➢ worldを書き換えて、表示されるメッセージが変わるのを確認してください 23
24. http - リクエストメソッド ❖ httpには要求時に実行したいアクションを定義する項目があり、 これをリクエストメソッドと呼ぶ ❖ 例えば ➢ ファイルを取得したい時には GETメソッド（要求ボディがセットできません） ➢ ファイルを投稿したい時には POSTメソッド ➢ ファイルを削除したい時には DELETEメソッド ❖ これらは例であり、実際に各メソッドに対してどういったアクションを 行うかはサーバアプリケーションの開発者が決めることができる ➢ 一般的には、情報の取得を行うときには GETメソッドを使う、 情報の送信を行う時には POSTメソッドを使うといった使い分けがなされている 24
25. http - セッション管理 ❖ httpはステートレスと言って、状態を持たない ➢ 例えばショッピングカートの内容を覚えておくことはできない ▪ でもできてるじゃん ❖ 開発者によって適切なセッション管理がなされている場合のみ、 状態を管理することができる ❖ セッション管理を行う方法としてCookieの利用が挙げられる ➢ とりあえずCookieというものがある、とだけ覚えておけば大丈夫です 25
26. http - セッション管理 ❖ python/sample2.pyでセッション管理の様子をみてみよう $ cd ~/serverside-primer/python $ emacs sample2.py ❖ 次の行でセッション情報を変更しています session[“count”] += 1 ❖ session[“count”]の中身はセッションが続く間記憶されます ➢ ./sample2.pyを実行し、Webブラウザで http://localhost:8000/countup にアクセスして、 更新するたびに数値が増加していくことを確認してください 26
27. http - セッション管理（発展） ❖ ブラウザの開発者ツールでCookieの中身を見てみよう ❖ 次のCookieの値は例です session=eyJjb3VudCI6MX0.X-Dlkw.tH3XCiEfLN8leyIW_Re5UinUKbQ ❖ eyJjb3VudCI6MX0の部分をbase64デコードしてみよう {"count":1} ❖ Flaskのsessionはその中身をbase64エンコードしたものを Cookieに持たせていることがわかる ➢ うしろの部分はタイムスタンプと署名です 27
28. 基本課題 1 ❖ コンピュータとじゃんけんできるサーバプログラムを書いてみよう $ cd ~/serverside-primer/python $ emacs exer1.py ❖ TODOとコメントしてあるところから書いていってください ❖ 解答例はanswer1.pyにあります 28
29. 基本課題 2 ❖ じゃんけんの成績をセッション情報として保持するようにしてみよう $ cd ~/serverside-primer/python $ emacs exer2.py ❖ TODOとコメントしてあるところから書いていってください ❖ 解答例はanswer2.pyにあります 29
30. 発展課題 ❖ sample3の中身を理解しよう ➢ python/sample3.pyはコメントがついています ❖ 自分の作りたいサーバプログラムを書いてみよう ➢ まずはsampleをコピーして、処理を追加していくところから始めるのをおすすめします ❖ 他の言語に興味がある方は、他の言語も触ってみましょう ➢ PHP、Node.js、Go言語でサンプルスクリプトを用意してあります 30
31. さいごに お疲れさまでした サーバプログラムが書けるようになったら、次はサーバの準備です 今回の講座のように自分のパソコンをサーバにすることもできますが、 サーバを公開するには、外部のサーバを借りるのがおすすめです ConoHaやさくらのVPSなどは手軽に始められておすすめです 31