いづいづブログ

アジャイルコーチになりたい札幌在住SEです。アジャイル札幌スタッフ＆ScrumFestSapporo実行委員。Like：パクチー/激辛/牡蠣/猫/初期仏教

Gitのリモートリポジトリから特定のファイルを削除する

Webプログラミング Gitの基本 備忘録
f:id:izumii-19:20190505171017p:plain

しょっちゅう同じ間違いを繰り返すので備忘録。

GitHubにPushするときに.gitignoreを用意していない状態で、以下のように全ての変更をindexにあげてcommit＆pushしてしまう。

$ git add . 
$ git commit -m "hogehoge"
$ git push orogin master

変更のあるファイルだけを指定してindexにあげればよい（add xxx.rb）のだけどめんどくさくてついついadd .してしまう。

すると.DS_Storeなどの不必要なファイルまでがGitHubのリモートリポジトリに登録されてしまう。

いつも後になってからこのファイルをリモートリポジトリから消したくなるので、そのときの手順。

手順

  1. git rmする。
  2. 変更をcommitする。
  3. リモートにpushする。

削除

ローカルのファイルも一緒に削除したい場合

$ git rm {削除したいファイル}

ローカルのディレクトリごと一緒に削除したい場合

$ git rm -r {削除したいディレクトリ}

ローカルのファイルは残したい場合

$ git rm --cached {削除したいファイル}

変更をcommit

$ git commit -m "hogehoge"

push

$ git push origin master

まとめ

.gitignoreを面倒がらずに用意しよう！

RuboCopを使う

Ruby RuboCop
f:id:izumii-19:20190503080015p:plain

RuboCopなるものを始めて使ってみました。

このエントリーではRubocopをインストールしてから使うまでの手順と、RubocopをVSCodeで使うための手順について説明します。

RuboCop

Rubyで書かれたコードが、コーディング規約にそって書かれているかをチェックする解析ツール。

こういったツールを使うことでコードの可読性を高めたり、チーム内のコーディングルールを簡単に適用することができる。

私は使っていないけど、auto-correct という機能を使えば、チェックだけではなくRuboCopが認識してくれる範囲で自動で修正してもらうこともできてさらに便利。

github.com

インストール

以下のコマンドを実行するだけ。

$ gem install rubocop

実行

さっそくRuboCopを実行してみる。 チェックしたい.rbファイルがあるプロジェクトに移動して、以下のコマンドを実行。

$ rubocop

f:id:izumii-19:20190503081556p:plain
RuboCopの実行結果。たくさんエラーが検出されている。

設定ファイル(.rubocop.yml)について

コーディング規約は「.rubocop.yml」というファイルに書かれており、インストール時に一緒に配置される*1。

Rubocopにデフォルトで設定されているコーディング規約はけっこう厳しいらしく、そのまま使う人は少ないということ。

コーディング規約を自分で変更したい場合は以下のいずれかの方法で変更できる。

  1. 既にある.rubocop.ymlを開いて設定を変更する。
  2. .rubocop.ymlを新しく作成しプロジェクトルートに配置する。*2

設定ファイルを変更する

設定ファイルの変更を実際に行う。

いくつかのブログを見てみたところ、「.rubocop.ymlを新しく作ってプロジェクトルートに配置する」というやり方が多いようなのでこの方法で変更してみる。*3

  1. 適用したい.rubocop.ymlをwgetコマンドなどを使用して持ってくる。今回はRailsのGitHubから持ってきた。
$ wget https://raw.githubusercontent.com/rails/rails/master/.rubocop.yml

wgetの引数にはGitHubの画面の「Raw」ボタンを押して表示されるURLを使う。

f:id:izumii-19:20190503085055p:plain
「Raw」ボタンをクリックするとURLが取得できる

  1. 取得した.rubocop.ymlをプロジェクトルートに配置。今回の例では~/RubyTutorial/に配置。

f:id:izumii-19:20190503085637p:plain
プロジェクトルートに配置

これでOK。のはずなんだけどプロジェクトルートに配置したら、こっちの.rubocop.ymlのチェックが適用されているということはどうやって確認するのだろう。

今回は実行してみてチェックの方法が変わっているかどうかで確認したが、もっと簡単にわかるのだろうか？

RuboCopをVSCodeで使う

私はRubyのコードをVSCodeで書いているので、VSCodeでも使えるようにする。

インストール

拡張機能からruby-rubocop 0.8.0をインストールして有効にする。

f:id:izumii-19:20190503090632p:plain
拡張機能からインストール

設定

[基本設定] - [設定] - [拡張機能]を開いて、以下の画面のように設定。

f:id:izumii-19:20190503091858p:plain
VSCodeでRuboCopを使うための設定

④の「Execute Path」は以下のコマンドで確認できるので、出力結果のパスをそのまま(…shims/まで)貼ればよい。

$ which rubocop
/Users/izumi/.rbenv/shims/rubocop

実行

インストールと設定が完了すると、保存時にチェックが実行されるようになる。

f:id:izumii-19:20190503092706p:plain
保存時にRuboCopのチェックが走る

おまけ

RuboCopを導入したら、Missing frozen string literal comment.の警告が必ず出てしまうようになってしまった…。

結果として# frozen_string_literal: trueというマジックコメントを先頭に入れることで解決できた。

これは Ruby 3.0 では文字列リテラルがデフォルトで freezeになる予定であり、これに先駆けて今から文字列リテラルをfreezeにしておく(=このマジックコメントを入れる)ようにしようということで、RuboCopの設定でチェックが有効になっていることが多いのだとか。

参考

  • インストール

　　Rubocop使ってみる - 電波ビーチ

  • .rubocop.ymlの内容

　　RuboCopの設定アレコレ - Qiita

　　[Mac]VScode で ruby-rubocop が動かなくなったら executePath を設定してみよう - Qiita

  • Missing frozen string literal comment.

　　【Ruby】RuboCopのFrozenStringLiteralCommentについて - TASK NOTES

*1:ただし、このファイルがどこに保存されているのかは探してみたけどわからなかった。

*2:実際にはゼロから作ることはなさそうで、GitHubから持ってきたり既存の.ymlファイルに変更を加えたものをプロジェクトルートに置くことが多い。

*3:あと、既存の.rubocop.ymlがどこにあるのかを私が見つけられなかったというのも理由のひとつ。

Vue.jsでHello,World

Vue.js
f:id:izumii-19:20190414231959p:plain:w400


GWの目標だった「JavaScriptもVue.jsもなにも知らないweb初心者が、Vue.jsでHello,Worldを表示させる」が完成したので記録を載せておきたいのと、メモを残しておきます。

ディレクトリ構成

ホームディレクトリの下に「VueTutorial」という練習用フォルダを作り、そこにwebpackを使用して「helloworld」というプロジェクトを作成。

vue init webpack helloworld

すると以下のディレクトリとファイルが作成される。

ディレクトリとファイル 内容
build/ webpackの設定やビルド用の設定用
config/ 各設定ファイルを格納。ポートの指定とかもここ
node_modules/ npmで管理されるモジュールが格納されている
src/ 開発用のディレクトリ
package-lock.json npmでパッケージを管理するために必要な設定ファイル
package.json npmでパッケージを管理する時に必要ファイル
static/ コンポーネントに依存しない静的ファイルを格納する
test/ テスト用設定ディレクトリ

ちなみにnpm run buildでビルドすると以下のディレクトリも作成される。

ディレクトリ 内容
dist/ ビルドが完了するとこのディレクトリにバンドルファイルが配置される。ここのファイル一式をサーバにデプロイする。

webpackを使って自動的に作成されたディレクトリに、自分で変更を加え、最終的に以下のような構成になった。*1

~/VueTutorial/helloworld/

　├ build/

　├ config/

　├ dist/

　├ node_modules/

　├ src/

　│　└ assets/

　│　 │　├ avatar.png ← 追加

　│　 │　└ logo.png

　│　├ components/

　│　 │　├ pages/← 追加

　│　 │　│　└ topPage.vue← 追加

　│　 │　└ HelloWorld.vue ← 最初に表示されるページ

　│　├ router/

　│　 │　└ index.js ← vue-routerの本体。

　│　├ App.vue ← 全ページ共通で使う部品などはここに書く。

　│　└ main.js ←メイン。「App.vue」と「router」をインポートしてる

　├ index.html ← 実質何もしない。

　├ package-lock.json

　├ package.json

　├ static/

　└ test/

実行

以下のコマンドで実行。

$ npm run dev

もし、本番用にビルドする場合はこっち。

$ npm run build

http://localhost:8080/ にアクセスするとこれまで通りvue.jsデフォルトのトップページが表示される。

トップページには"Hello Worldページへ"というRouterLinkをあらかじめ用意しておいたのでそこをクリックすると、今回あらたに追加した"topPage.vue"の内容が表示される。

このプロジェクトにはindex.htmlは1つしかないのに、このように複数のページをroterで切り替えることができる。

これがSPA(Single Page Application)というやつらしい。

【実行結果】

【コード】

GitHub - izumii19/VueTutorial

参考サイト

coinbaby8.com

*1:フォルダ構成とかファイル名とかアレな感じなのはそのうち直すので、今は大目に見ることにする。

Rubyのインストール

Ruby
f:id:izumii-19:20190501101628p:plain:w400

今日からサーバーサイド言語であるRubyを勉強します。 まずはインストールしてRubyを使える環境を作成しますが、色々長いので目次を作りました。
（いつも作ればいいのかもしれない）

環境

macOS Mojave 10.14.4

インストール

Xcode

もともと入っていたのですがバージョンが古かったので最新にしました。ただXcodeを最新にするにあたってmacOSのアップデートも必要でした。

  • macOSのアップデート(macOS Mojave 10.14.4)
  • Xcodeのアップデート(10.2.1)

Xcode インストールはApp Storeなどから行います。

Command Line Tools for Xcode

Xcodeをインストールしたら、Xcodeのメニューから Xcode → Open Developer Tool → More Developer Toolsの順番で操作。 Downloads for Apple Developerが開くので、そこのリストから”Command Line Tools(OS X 10.14) for Xcode 10.2.1”をダウンロードしてインストール

Homebrew

RubyやRailsに関連するソフトウェアはMacのパッケージ管理システムのHomebrewを使用する。これも入っていたが最新にしておく。この時にupgradeも行って既存のパッケージも更新しておく。*1

$ brew update
$ brew upgrade

updateとupgradeが終わったらdoctorで状態を確認。Your system is ready to brew.が表示されればOK。

$ brew doctor
Your system is ready to brew.

Git

最初から入っているはずだけど一応最新に更新。インストールする場合は以下のコマンドで実行できる。

$ brew install git

irb

irbは"Interactive Ruby"。これを入れると対話形式でRubyのコードの実行結果が確認できる。

$ brew install readline

openssl

httpsを使用するためのパッケージ。すでに入っているので省略するがインストールする場合は以下のコマンドで実行できる。

$ brew install openssl

ruby-build

rbenvでrubyをビルド・管理するためのパッケージ。

$ brew install ruby-build

rbenv

Rubyを使用する上で必須となっているバージョン切り替えツール。インストールもrbenvで行うのでインストールする。*2

$ brew install rbenv

インストール後はpathの設定を行うが基本的に以下の通りやればOK。

$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile

Ruby

ここでやっとrbenvを使ってRubyをインストールします。

まずは最新バージョンを確認。以下のコマンドでバージョン一覧を表示して確認するか公式サイトでも確認可能（2019/4/30時点での最新は2.6.3）。

$ rbenv install -l

次に最新バージョンをインストールする。

$ rbenv install 2.6.3

rbenvで切り替えとか確認とかしてみる

インストールが終わったら、インストール済みのバージョンをversionsコマンドで確認する。*がついているバージョンが現在選択中のバージョン。

$ rbenv versions
  system
  2.6.0
* 2.6.3 (set by /Users/izumi/.rbenv/version)

標準で使うrubyのバージョンを切り替えるときはglobalコマンドで切り替えてversionsで確認する。

$ rbenv global 2.6.3

これでRubyを切替可能な状態で使える環境が作成できた。

難しくはないけど準備が多いので、順番にやっていくのがコツだろうなぁ。

参考

【macOS Sierra】Mac OSX 10.12 macOS Sierra にRuby + Rails4 開発環境の構築 【初心者必見】 - Qiita

*1:何かの環境構築をするために新しいパッケージをインストールする必要がある場合は、Homebrewのupdateとupgradeを必ず行ってからがよい。これをやらずに進むとバージョンの互換性なのかなんなのか環境構築で思いもよらずエラーがでることがあるため。

*2:「rbenv」は"あーるべんぶ"とか"あーるびーえんぶ"と発音するらしい。

NginxでSSL通信

nginx
f:id:izumii-19:20190428123747p:plain:w300

前回はVirtualHostを使って1つのサーバーに２つのWebサイトを構築しました。

今日はこのうちの１つ"www.izumii.work"サイトをSSL通信できるようにしてみます。さらにSSL通信している時としていない時の違いを比較してみたいと思います。

環境

さくらのVPSに作ったDebian9(stretch)

SSL

SSLについては以前書いたこちらの記事にまとまっている。

izumii19.hatenablog.com

SSL通信を行うにはSSLサーバー証明書が必要なのですが、今回はopensslで作成したオレオレ証明書で代用します。

SSLサーバー証明書を作成

SSLサーバー証明書については以下のサイトが非常にわかりやすく、SSLサーバー証明書とオレオレ証明書の違いについてもよくわかる。

オレオレ証明書を作成する手順もここに書いてある通りで作成できる。

ozuma.hatenablog.jp

ただ１箇所だけ注意点。

(2) 証明書署名要求(CSR; Certificate Signing Request)の作成」の項目で以下のように書かれている。

コマンドを実行すると対話形式で色々聞かれるが、ここではオレオレ証明書を作る予定なのでデフォルト値を用いてEnter連打で構わない。(ただしCommon Nameのところは、もしFQDNがあるならばそれを入れておいた方が妥当)。

これについてはCommon NameがSSL通信したいWebサイト名と一致していないとうまくいかないといった例もあるようなので入れた方が妥当というよりも必ず入れるようにする。

つまり、"www.izumii.work"に対してSSL通信を行うのであればCommon Nameにも"www.izumii.work"を入れるということになる。

このサイトの(2)の手順までを行えばオレオレ証明書の作成は完了。

SSL証明書についてと作成の注意点を理解した上で「単純にオレオレ証明書だけを作成したいんだ」という場合は以下のコマンドを実行すれば10年間有効の証明書がいつでも作成できる。

$ openssl genrsa 2048 > server.key
$ openssl req -new -key server.key > server.csr
$ openssl x509 -days 3650 -req -signkey server.key < server.csr > server.crt

ここまで行うと以下の３つのファイルが作成されるので、これをetc/sslの下へ移動する。ただし「server.csr」は使わないので移動しなくてもOK。

  1. 秘密鍵 (Private Key)：server.key
  2. 証明書署名要求 (CSR)：server.csr ←使用しない
  3. サーバ証明書(CRT)：server.crt

Virtual Hostの設定

VIrtual Hostの設定ファイルにSSLの設定を追記する。 VIrtual Hostの設定ファイル/etc/nginx/sites-available/izumii.workをsudoコマンドで開いて、

server {
        listen 80;
        〜中略〜  
}

の下にもう１つ以下のようなserverディレクティブを追加する。

server {
        listen 443;
        server_name www.izumii.work;
        access_log /home/demo/public_html/izumii.work/log/access.log;
        error_log /home/demo/public_html/izumii.work/log/error.log;
        location / {
                root /home/demo/public_html/izumii.work/public/;
                index index2.html;
        }
        ssl on;
        ssl_certificate /etc/ssl/server.crt;
        ssl_certificate_key /etc/ssl/server.key;
}

このディレクティブをwww.izumii.workとizumii.workの２つ分作成する。この時点でserverディレクティブは４つになっているはず。*1

設定の解説

ざっくりと解説。赤字以外は80番ポート用のサーバー設定と同じである。

  • サーバー設定
    • izumii.workへの接続は443番ポートを使用
    • サーバー名はwww.izumii.work
    • アクセスログの保存先
    • エラーログの保存先
    • rootファイルのありか
    • 表示するindexファイルはindex2.html
    • ssl通信をおこなう
    • サーバー証明書
    • 秘密鍵

本来80番ポートの設定を書いてあるserverディレクティブにまとめて書くことが可能なのだが、今回はSSL通信する時としない時で表示するindex.htmlを明示的に分けたかったので別々に分けて設定を書いている。

最終的に設定ファイルは以下のようになった。

f:id:izumii-19:20190501005604p:plain
/etc/nginx/sites-available/izumii.work

確認

設定ファイルの読み込みを行うため、一旦停止してから起動する。

$ sudo /etc/init.d/nginx stop
$ sudo /etc/init.d/nginx start

SSL通信している（https://〜）

Chromeで"https//www.izumii.work"と入力。

オレオレ証明書なのでhttps://になってしまって”保護されていない通信”と出てしまっているが、設定ファイルに記載したssh用のindexページ（index2.html）が表示されていて、SSL通信できていることがわかる。

f:id:izumii-19:20190429160645p:plain
ssl通信している

SSL通信していない（http://〜）

Chromeで"www.izumii.work"と入力。”保護されていない通信”と表示され、SSLではないことがわかる。

f:id:izumii-19:20190429160425p:plain
ssl通信していない

これで1つのサーバーに複数のWebサーバーを構築して、SSL通信させる方法までを習得できましたー。

あー疲れた。

参考

プログラミングビギナーNekoteniがあなたに贈る！NginxでSSLの巻 - ねこテニ

nginx連載6回目: nginxの設定、その4 - TLS/SSLの設定 - インフラエンジニアway - Powered by HEARTBEATS

*1:もっと良い書き方があるのかもしれないがとりあえずは良いことにする。

NginxでVirtual Hostに挑戦

nginx
f:id:izumii-19:20190428123747p:plain:w300

Nginxのインストールととりあえず自作のhtmlを表示させてみるというのをやってみてNginxがなんなのかがなんとなくわかってきたところで、今度はVirtual Hostで複数のサイトを立ち上げるのに挑戦してみます。

環境

さくらのVPSに作ったDebian9(stretch)

Virtual Hostとは

1つのサーバで複数のドメインを運用する技術のこと。Webサーバやメールサーバなどで利用される。

つまりVirtual Hostを使うと１つのIPで複数のサイトを運用できたりポートでサイトを分けたりすることができるのでいくつもサーバーを立てる必要がない。

ドメインの取得

webサイトを構築するにはドメインを取得する必要がある。今回はお名前.comで取得。有料だけど.workとかだと1円で取れる。

ネームサーバーに登録する

ドメインを取得したあとは、ドメインとIPアドレスを紐付けるためにネームサーバー*1に登録する必要がある。

なぜドメインとIPアドレスを紐付ける作業が必要かについてはここを読むとよい。

ちなみに今回のようにレンタルサーバーで独自ドメインを使用したい場合は両方での登録が必要になる。

  • お名前.comでネームサーバーの変更の設定
  • さくらVSPのネームサーバーの設定

ネームサーバーの登録は以下のサイトのとおりにやればOK。「手続きには〜72時間くらいかかります」と言われるが実際には1時間もしないで使えるようになった。

「さくらのVPS」に「お名前.com」で取得した独自ドメインを割り当てる手順 | 100%レンタルサーバーを使いこなすサイト

ネームサーバーへの登録がうまくいっているかどうかはnslookup コマンドで確認可能。

$ nslookup {ドメイン名}

f:id:izumii-19:20190429082641p:plain
登録されるとNameとAddressが返ってくる

Virtual Hostの設定

ここまではVirtual Hostを使用するための準備なので、ここからが実際にVirtual Hostを使用する手順となる。

今回は以下の2つのドメインを運用してみる。

  • izumii.work
  • nandeyanen.club

Virtual Host用のディレクトリ作成

この先は同じ手順を2回書くのが面倒なので、"izumii.work"を例に説明する。

まずVirtual Host用のディレクトリを作成する。今回は/home/demo/public_htmlに作成。

$ sudo mkdir /home/demo/public_html

この下に、さらに2つのドメイン用のサブディレクトリを作成。

$ sudo mkdir -p /home/demo/public_html/izumii.work/{public,private,log,backup}

index.htmlを配置

index.htmlを配置する。先程作ったドメイン毎のサブディレクトリ（のpublic）の下に配置。

$ sudo vim /home/demo/public_html/izumii.work/public/index.html

ここまでで表示させたいもの（index.html）とそれを置く場所の準備ができた！

Virtual Host用の設定ファイルを作成

vimで新しくizumii.work用の設定ファイルを新規作成する。sites-availableディレクトリを作成してそこに作る。

$ sudo vim /etc/nginx/sites-available/izumii.work

空のファイルが作成できたら、vimで開いて以下のように記述する。

server {
　　　listen 80;
　　　server_name www.izumii.work;
　　　access_log /home/demo/public_html/izumii.work/log/access.log;
　　　error_log /home/demo/public_html/izumii.work/log/error.log;
　　　location / {
　　　　　　　　root /home/demo/public_html/izumii.work/public/;
　　　　　　　　index index.html index.php;
　　　　　　　　}
　　　}
server {
　　　listen 80;
　　　server_name izumii.work;
　　　access_log /home/demo/public_html/izumii.work/log/access.log;
　　　error_log /home/demo/public_html/izumii.work/log/error.log;
　　　location / {
　　　　　　　　root /home/demo/public_html/izumii.work/public/;
　　　　　　　　index index.html index.php;
　　　　　　　　}
　　　}

※これをコピペして使う場合は先頭のスペースをタブかなんかに変換しないとエラーになります。注意！！！

Virtual Host用の設定ファイルの解説

ここで、今作った設定ファイルの中身を軽めに説明。

まず同じような設定を２つ書いているのは「www.izumii.work」と入力しても「izumii.work」と入力しても同じページを表示させるため。 次に記述してある内容はざっくり以下のとおり。

  • サーバー設定
    • izumii.workへの接続は80番ポートを使用。
    • サーバー名はwww.izumii.workまたはizumii.work
    • アクセスログの保存先
    • エラーログの保存先
    • rootファイルのありか
    • indexはindex.html index.php;のどっちか

設定ファイルをNginxが読み込めるようにする (1)

具体的にはsites-enabledディレクトリを作成し、さきほどsites-available内に作った設定ファイルへのシンボリックリンクを張る。

$ sudo ln -s /etc/nginx/sites-available/izumii.work /etc/nginx/sites-enabled/izumii.work

Nginxは、起動時に/etc/nginx/sites-enabledに入っている設定ファイルを読み込む。「だったらsites-enabledに直接設定ファイルおけばよくね？」と思われそうだが、そこにはおそらくちゃんと理由があると思う。今はとりあえずお約束なんだなという理解にとどめておく。

設定ファイルをNginxが読み込めるようにする (2)

Nginxが設定ファイル(nginx.conf) を読み込む際に/etc/nginx/sites-enabledも読み込むように設定する。

/etc/nginx/nginx.confを開き以下の１行を追加する。

include /etc/nginx/sites-enabled/*;

f:id:izumii-19:20190429094720p:plain
httpディレクティブに追加

ここまでの構成を確認

VirtualHostの設定はここまででおしまい。

で、こうなっているはず。(図がちょっとぐちゃぐちゃだけど勘弁)

/ ルートディレクトリ

｜

├ /bin 一般ユーザー向けの基本コマンド

├ /etc 設定ファイル

｜　　├ /nginx ←ここにNginxの実行ファイルがいる

｜　　├ nginx.conf ←Nginxの設定ファイル

｜　　　├ /sites-available - izumii.work ←設定ファイル

｜　　　├ /sites-available - nandeyanen.club ←設定ファイル

｜　　　├ /sites-enable - izumii.work ←sites-availableへのシンボリックリンク

｜　　　├ /sites-enable - nandeyanen.club ←sites-availableへのシンボリックリンク ｜

├ /home　ユーザーのホームディレクトリ

｜ ├ /demo ←Virtual Host用ディレクトリ

｜ 　 ├ /public_html

｜ 　 　├ /izumii.work ←サブフォルダ

｜ 　 　　├ /public - index.html ←トップページ

｜ 　 　　├ /private

｜ 　 　　├ /log

｜ 　 　　├ /backup

｜ 　 　├ /nandeyanen.club ←サブフォルダ

｜ 　 　　├ /public - index.html ←トップページ

｜ 　 　　├ /private

｜ 　 　　├ /log

｜ 　 　　├ /backup

確認

設定を変えたので一度Nginxを終了してから起動する。

$ sudo /etc/init.d/nginx stop
$ sudo /etc/init.d/nginx start

izumii.workにアクセス

ブラウザで"izumii.work"と入力。表示された！

f:id:izumii-19:20190429095717p:plain:w400
　www.izumii.work

nandeyanen.clubにアクセス

ブラウザで"www.nandeyanen.club"と入力。wwwつきで入力してもちゃんと表示される。

f:id:izumii-19:20190429100041p:plain:w400
nandeyanen.club

とりあえずここまでで、自分でwebサーバーを構築し、ドメインの取得をして自作のwebサイトを立ち上げるところまでがひとりでできたことになります。

いやー勉強になった！

参考サイト

*1:DNSサーバーともいう。

NginxでHello,World

nginx
f:id:izumii-19:20190428123747p:plain:w300

debian環境にNginxのインストールまでがうまくいったので、次は任意のhtmlファイルを配置してそれを表示させるようにしてみます。

実際にやってみるにあたっては設定ファイルの意味などをだいぶ調べたりしているのですが、このブログ自体はかなり雑に書いているので同じことをやりたい人の参考にあまりならないかもしれませんがお許しください。俺メモに近いです。

環境

さくらのVPSに作ったDebian9(stretch)

設定ファイルの場所

パッケージシステムからNginxをインストールすると、設定ファイルは通常ここにできる。このファイルを開いて中を見てみる。

/etc/nginx/nginx.conf

設定ファイルの中身

f:id:izumii-19:20190428114425p:plain
nginx.conf

とにかく今表示されているindex.htmlファイルがどこにあるかを知りたいのだからが、ファイル内にはとくにindex.htmlに関する記述はないように見える。なのでこの設定ファイルの中身について理解すべく色々調べてみた。 設定ファイルは、Nginxのモジュールのカテゴリごとに分けて記述する必要があり、大きく分けて４つのカテゴリがある。

  • coreモジュール
  • eventモジュール
  • httpモジュール
  • mailモジュール(上の画像にはない)

eventモジュールの設定はevents{}、httpモジュールの設定はhttp{}内に書いてある。（coreモジュールの設定は{}でくくらず先頭にまとめて書くようだ。）

ここでhttp{}内の下の方に以下のような記述がある。

include /etc/nginx/conf.d/*.conf;

include ディレクティブにファイル名を記述することで、指定したファイルに書かれた設定を読み込むことができる。

ここでは/etc/nginx/conf.dフォルダ以下にあるすべての.confファイルを読み込むという意味になる。

なので、/etc/nginx/conf.dフォルダ以下にある.confファイルの中身を確認してみる。

default.conf

/etc/nginx/conf.dフォルダ以下にあるdefault.confファイルを開く。

f:id:izumii-19:20190428121511p:plain
default.conf

サーバーごとの設定（server{}セクション）が書かれているっぽい。 このserver{}セクション内にlocation{}セクションが存在する。そしてrootの場所とindex.htmlの設定が書かれている。

server {
　〜 略 〜
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
　〜 略 〜
}

locationの中身についてはいろいろ調べてそこそこ大変だったが、調べたことを全部書くと膨大な量になるので省略。 以下のサイトが参考になったので、default.confファイルの記述の中身についてはここを読むと良い。

nginx連載3回目: nginxの設定、その1 - インフラエンジニアway - Powered by HEARTBEATS

nginx連載4回目: nginxの設定、その2 - バーチャルサーバの設定 - インフラエンジニアway - Powered by HEARTBEATS

nginx連載5回目: nginxの設定、その3 - locationディレクティブ - インフラエンジニアway - Powered by HEARTBEATS

で結論としてはlocationの設定をURIのパス毎に分けて書くことで、おのおの任意のページを表示できる。 なので、既存の locationセクションのしたにもう１つ任意のindex.html を表示するためのlocationの設定を、既存のlocationの設定の下に追加する。

location /reiwa { 
    root   /usr/share/nginx/html/reiwa; 
    index  index.html index.htm; 
}

表示

アクセスしてみたら表示された。

f:id:izumii-19:20190428123429p:plain
hello,worldならぬ「Hello reiwa!!」