wordpressのスケルトンテーマでunderstrapを使ってて、カルーセルスライダーの画像の一部にブラーをかける備忘録

understrapのスケルトンテーマでは、wordpress&bootstrapでカルーセルスライダーを入れていて、トップページのメインビジュアルの中央部分に部分的にblurをかけて、スリが和す風の上に文字がくっきり乗っているようにしたい。ただし、背景画像全体にblurは、メインビジュアルの意味がなくなるのでNG。
1)スライダーの画像は入れ替わる
2)上に重ねるdivで文字を載せるので、背景になるスライダーの画像全体でなく、そのdivの枠の中身だけブラーかけたい
3)スライダーの画像は、WPの管理画面のwidget登録からお客様が自分で画像をポンと入れ替えるようにしたい
メインビジュアルの単なるパーツなのに地味に面倒・・・
入れ替わる画像のurlの配列を取ってこないといけなくて、それをブラーかけるjsなりcssなりに渡さないといけない。
・・・意外と道のり長いな;

とりあえず、スライダーの画像は、wp_optionに入っているから、そのキーをget_optionで取ってきて、多次元配列をforeachで回す。
dumpしてみたら画像のURLのキー名称がわかったので、それをforeach内で取得して。
ブラーの背景画像URLをセットしているコードのところに、変数にセットしたURL(または取得コードを入れ子にして?)を置き換える。

とりあえず前半はすんなりできたけど、cssに変数入れ替えるのが、js使って面倒だったので、
https://msurguy.github.io/background-blur/
これで。
インラインのコードでurl指定する箇所に、先に取得した画像のURL置き換えたらいけるはず。

ほんで、gulpでjsもminファイルを自動更新するようになってるので、jsのincludeディレクトリとgulpのタスクコードにブラー用のjsを追加。ただしjqueryの後から読み込まれるようにしないといけない・・・と。

もうちょい!!・・・かな?







WORDPRESSでスケルトンテーマを使う

WEB制作の現場では、大きな予算のあるようなプロジェクトは、もちろんデザインや戦略がトップにくるので、スクラッチで「こうあるべき」と開発要件を決めていきます。
一方で、予算がない時とか普通なサイト(どんなんよ;)の場合は、お客さまが、単純にWORDPRESSで作ったら、元がタダだし、安くできるんじゃないの?早くできるんじゃないの?と吉野家行ってこいな勢いで迫ってくるようなこともあったり、ユーザー側で更新が必要なサイトだと、WORDPRESSでCMS組んじゃうのが使い勝手が良いところがあったりで、WPさんにお世話になることも結構多い昨今です。

よく制作者のブログ記事なんかでは(てかお前もじゃんwとか言わないの。)wordpressに必ず入れときたいプラグイン10選とか、そういう記事もよくありますが、実制作してると、ちょっと違うんだよなぁ、ということもママあります。もちろん、それでオッケーなこともあるんでしょうけどねw

最近やっている案件で、不動産屋さんの物件検索機能つきCMSサイトというのがあって、検索機能とかお問い合わせ機能とかを色々組み込む必要があったので、デザインは簡単にいきたいということで、WP案件ですが、スクラッチでコーディングするのではなくWPのテーマを元にカスタムコードなんかを組み込んでいくというやり方で進めたので、その備忘録を書いときます。

WPでデザインを作るときには、いくつかやり方があるけれど、どのみち、WPのテンプレートの組み込み規則にしたがって、wp-content/theme/のテンプレートディレクトリの中に、自分の使うテーマ用のフォルダを作成して、その中にコアのWPに連携できるように、.phpのテンプレートファイルを追加していくことになります。

そこで、テーマファイルを一から作りたくない人は、WPに標準で入っているtwentyseventeenみたいなのをコピーして中身のファイルを変更して、という感じ。
しかし、元にするテンプレートセットに色々複雑な機能が組み込まれていたり、画像が読み込まれていたりすると、それを要るものと要らないものに仕分けして変更するのはまあまあ面倒です。

そこで、登場するのがスケルトンテーマと言われるもの。
これは、読んで字のごとく、基本で必要なテンプレートファイルの一式をセットにしたものに、それぞれのスケルトンテーマの配布元が、特徴のある機能や仕組みを追加したりしているものです。基本は、デザインに関する画像なんかは入っていない骨組みだけだったり、編集が必要なCSSファイルなんかに細かくインラインで注意書きや使い方を書いてくれているものが多いです。
例えばあらかじめBootstrap4を組み込んでくれてる、とか、CSSの編集は、sassやlessを組み込んでくれているとか、あるいはファイル管理システムで元のテーマが更新されたときには自動で更新できるようになっていたり、みたいな。

ただし、スケルトンテーマは、自分でCSSやphpのテンプレートファイルをいじって編集できる人向けです。わっかんないわ、っていう人は素直に素人向けテーマファイル買いましょう。その方が絶対幸せになれます。

いくつか人気のものがあって、その中で私が現時点でママ良いと思ったものはこの4つ。
・habakiri=>日本の方が開発者なスケルトンテーマ。開発現場で結構人気。
・bones=>必要なものが揃っていて、なおかつファイル内のコメントなどがわかりやすく、読み解きやすい。
・underscore=>無駄にソースを汚したくない人向けのドベーシックなテーマ。スクラッチくらいの勢いで作りたい人は、これを使うと結構幸せになれると思います。WPの機能は損なわず必要なテンプレは揃っていて、なおかつ要らないものはほぼ入っていません。
・understrap=>underscoreにBootstrap4を組み込んで、SASSでCSS編集するようにして、gulpで更新管理や最小化ファイルをかき出してくれる、みたいな今時なやつ。

で。understrap使いました。
これは、エンジニア向けな更新フレームワークが組み込まれていたりして、ちょっと調べたりするのめんどいなぁと思ったりで、本当は、underscoreスタートにしたかったのだけど、ここにbootstrapを自分で組み込んだり、sass対応を考えるなら、あらかじめやってくれてるヤツのルールを調べて覚える方が、まだ楽かなぁと思ったのと、understrapは、childテーマに対応していて、公式サイトでもchildテーマを配布しているので、本体の更新の時に対応しやすかろうということ、あとは、githubでの更新が早く、不具合とかわからないことがあっても結構早くにレスが返ってくるので、その辺が地味に助かるからです。

understrapはファイル更新をgulpで管理する仕様になっています。
(この記事は書きかけです。ちょっと長くなるので、少しずつ追記します。)




ubuntu16.04 + nginx + unicorn + mysql + ajentiでバーチャルホストにredmineインストール

こちらは、前回のConoHaのubuntuにnginxのバーチャルホスト環境を構築したところに、Ajentiでサーバー管理を行う環境を構築した記事の続きになります。

Redmineを動かすに当たって、nginxは、今回はプロキシーサーバとして機能してもらい、WEBサーバーは、ライトウエイトなunicornに活躍してもらうこととしました。(おそらく同じロジックの応用でpumaやthin+nginxでも構築できると思います。)

今回は、Ajentiのコンパネ管理を併用しつつ、ubuntuのVPS環境にバーチャルホストを追加作成してRedmineをインストールします。

  • ubunutu16.04
  • nginx(proxyとして使う)
  • unicorn(WEBサーバーとして使う)

RedmineはRuby on Railsでできたオープンソースのプロジェクト管理システムです。
GitやSubversionとの連携ができたり、ガントチャートが利用できたりと、色々と便利なのですが、いかんせん環境を選ぶというか、インストールが大変なことでも知られるシステムになります。

Redmineのインストールは、ターミナルからのコマンド入力を併用しつつ、面倒なところは、AjentiのコンパネやFTPで簡単にやっていきます。

※前回までの記事で、ConoHaのVPSでubuntu16.04サーバーに、ajentiやnginx、メールサーバーなどの基本のサーバー構成が構築できている前提です。

まずは下準備を。

  1. 最初に、ConoHaのVPSコンパネからDNSでAレコードを追加し、Redmineを運用するサブドメインを発行しておきます。(仮にredmine.example.comとします。)
  2. Ajentiの管理パネルのWEBサイトメニューから、新しいWEBサイトとして、redmine.example.comのバーチャルホストを作成します。一般設定タブでは、ディレクトリを、/var/www/redmine.example.com/htmlで作成し、メンテナンスモードのチェックは外します。ドメインタブでは、redmine.example.comを追加して、「APPLY CHANGES」ボタンで設定を適用します。

ここまでで、redmine.example.comのWEBサイトを後悔する準備ができました。
htttp://redmine.example.comでブラウザからアクセスすると、nginxの初期ページが見えていると思います。

次に、Redmineに必要なモジュール類を追加インストールしていきます。

#Rubyと関連モジュールのインストール
sudo apt-get install ruby bundler imagemagick libmagickwand-dev libcurl4-openssl-dev git subversion rails ruby-dev gcc make libmagick++-dev
#MySQL関連は下記で、まだ入っていないものを追加する
sudo apt-get install mysql-server mysql-client libmysqlclient-dev
#MariaDBをMySQLの代わりに使う場合はこちらから、まだ入っていないものを追加する(※今回は、MySQLで進めているので、こちらについては、説明しません。必要なものの参考情報のみです)
sudo apt-get install mariadb-server libmariadb-client-lgpl-dev

Redmine用のMySQLconfigファイルを追加します。

redmine.cnfという名称のテキストファイルを/etc/mysql/conf.d/に追加し、下記の内容を記載します。

#/etc/mysql/conf.d/redmine.cnf
[mysqld]
innodb_file_format = Barracuda
innodb_file_per_table = 1
innodb_large_prefix = ON
character-set-server = utf8mb4
skip-character-set-client-handshake
collation-server = utf8mb4_general_ci
init-connect = SET NAMES utf8mb4
 
[mysql]
default-character-set = utf8mb4
 
[client]
default-character-set = utf8mb4
 
[mysqldump]
default-character-set = utf8mb4

これは、MySQLの文字コードを、uft8の絵文字が使えるよう、4バイト対応の文字コードにする設定です。

Ajentiの管理パネルでファイルマネージャーを開き、/etc/mysql/conf.d/ディレクトリで、新しいファイルを作成ボタンをクリックします。new fileという名前の新しいテキストファイルができますので、ファイルをクリックして、名前を「redmine.cnf」に変更して一旦保存します。


保存したファイルをメモ帳で開き(再度クリックしてファイルの編集ボタンを押すとメモ帳で開かれます)、上記コードを入力して保存してください。

さらに、migrate時にrow_formatを指定するため、同様の手順で下記のファイルを追加します。

#/var/www/redmine.example.com/config/initializers/utf8mb4.rb

ActiveSupport.on_load :active_record do
 module ActiveRecord::ConnectionAdapters

  class AbstractMysqlAdapter
   def create_table_with_innodb_row_format(table_name, options = {})
    table_options = options.merge(:options => 'ENGINE=InnoDB ROW_FORMAT=DYNAMIC')
    create_table_without_innodb_row_format(table_name, table_options) do |td|
     yield td if block_given?
    end
   end
   alias_method_chain :create_table, :innodb_row_format
  end

 end
end

次に、svnでRedmine本体をダウンロードします。

sudo -u www-data svn co http://svn.redmine.org/redmine/branches/3.3-stable /var/www/redmine.example.com/html

ファイル一式の所有権を、ユーザー・グループともに、www-dataに変更します。

chown -R www-data:www-data /var/www/redmine.example.com/html

もうひとつのやり方として、Ajentiの管理パネルから行うこともできます。
どちらでも同じことができますので、お好きなやり方で。svnで作業した場合は、アップデートの際に、svn経由で行えますので、後々少し楽かもしれません。

WEBサイトメニューの一般設定タブの中の、「AUTOMATIC DOWNLOADER」のURLに下記のRedmineの圧縮ファイルまでのリンクを入力し、「DOWNLOAD AND UNPACK」ボタンをクリックします。

http://www.redmine.org/releases/redmine-3.3.3.tar.gz

すると、/var/www/redmine.example.com/html/内に、“redmine-3.3.3”というディレクトリができ、Redmineのファイル一式が格納されます。ダウンロードが完了したら、同じく一般設定タブで、「FIX FILE PERMISSIONS」ボタンをクリックします。
これで、ディレクトリ内のファイルの所有権をWEBの実行ユーザーであるwww-dataに変更することができました。

ファイルマネージャーメニューで、“redmine-3.3.3”の中のファイルを全て、一つ上の /var/www/redmine.example.com/html/ へ移動させます。

ここまでで、Redmineのファイル一式をWEBの公開ディレクトリに設置することができました。

Redmine用に、MySQLのデータベースとユーザーを作成します。

Ajentiの管理パネルのWEBサイトメニューを開き、MySQLタブで、新しいDBとDBユーザー・パスワードを追加します。(redminedb / redmineuser / password と設定しました。わかりやすい適当な名称とセキュリティを考慮したパスワードにしてください;)

続けて、インストールのための初期ファイルを設定していきます。

  1. Gemfile
    Ajenti管理パネルのファイルマネージャーから、 /var/www/redmine.example.com/html/Gemfile を開きます。

    メモ帳で、7行めに、下記コードを追加し、保存します。

    gem "unicorn"

  2. データベース用のconfigファイル
    Ajenti管理パネルのファイルマネージャーから、 /var/www/redmine.example.com/html/config/database.yml.sample のファイル名を、「database.yml」に変更し保存してから、メモ帳で開きます。
    今回は、プロジェクト管理ツールとしてRedmineをインストールするため、テスト環境などは不要です。productionのみ編集し、先ほど作成したMySQLのDB情報を入力し、保存します。

    • MySQLのDB名
    • MySQLのDBユーザー名
    • MySQLのDBパスワード
  3. メール送信用のconfigファイル
    同じ手順で下記ファイルを編集します。
    /var/www/redmine.example.com/html/config/configuration.yml.sample ー>「configuration.yml」として保存。
    メールサーバーとメールアカウントの情報を入力し、保存します。
    Redmine用のメールユーザーを新規作成する場合は、先にAjentiの管理パネルのメールメニューから作成しておいてください。メールサーバーは、前回までに作成した独自ドメインのメールサーバーを使用する前提です。SSL通信で接続する場合や、Gmailなどを使用する場合は、検索すると設定内容が見つかると思いますので、他のブログなどで探してみてください。
    configuration.ymlの設定は、Redmineでメール通内を行う場合に必要ですが、設定しなくてもRedmineのインストール自体は進められます。メール設定を行わず、そのまま進める場合は、configファイルの内容を変更する必要はありません。

    • address ー>メールサーバー
    • domain ー>メール送信をするドメイン
    • user_name ー>メールユーザー名
    • password ー>メールユーザーのパスワード

いよいよ、Redmineのインストールを行います。

ここまでで、一通りの準備ができたので、Redmineのインストールを進めます。

ターミナルで、下記コードを入力し、Redmineのインストールディレクトリに移動して、インストールを開始。

cd /var/www/redmine.example.com/html

sudo -u www-data bundle install --path vendor/bundle --without development test postgresql sqlite

DBにRedmineのテーブルとカラムをインストールします。

sudo -u www-data bundle exec rake generate_secret_token

sudo -u www-data bundle exec rake db:migrate RAILS_ENV=production

MySQLにアクセスして、テーブルとカラムが作成できているか確認しておきます。(下記redmineuserとredminedbは、DBユーザー名ですので、自分のユーザー名に置き換えてください)

mysql -u redmineuser -p;

(パスワードを聞かれるので入力してEnterキーを押す)

use redminedb;
show tables;

テーブルがずらっと表示されたらOKです。MySQLを抜けます。

exit;

この時点で、エラーなくインストールができていれば、unicorn単体で、Redmineが動作するはずですので、unicornを起動して、動作を確認しておきましょう。

sudo -u www-data bundle exec unicorn_rails -l 3000 -E production

エラーなく起動できたら、ブラウザで、
http://redmine.example.com:3000
へアクセスし、Redmineの初期画面が表示されるのを確認します。

確認できたら、Unicornは、Controlキー+Cキーで、一旦終了します。

次に、Nginxをプロキシーとして設定して、Unicornにソケット接続するとことまでをやっていきます。

  1. Ajentiの管理パネルから、WEBサイトメニューで、redmine.example.comのサイト管理ウインドウを開きます。
  2. 「Custom top level configuration 」には下記コードを入力します。
    upstream redmine.example.com {
    server unix:/var/www/redmine.example.com/html/tmp/unicorn.sock;
    }
  3. 「APPLY CHANGES」ボタンをクリックして設定を反映させます。
  4. 「高度な設定」タブの「カスタム設定」に下記コードを入力します。proxyに関する上の3行のコードは、タイムアウトさせる時間の長さを設定したものなのでエラー対策なので、無くても動作するようなら省いても構いません。
    proxy_connect_timeout 60;
    proxy_read_timeout 60;
    proxy_send_timeout 60;
    
    location / {
    proxy_pass http://redmine.example.com;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  5. (注)もし、この後、サイトにアクセスした際に、リクエストの処理に時間がかかってエラーが返される場合は、「カスタム設定」の一番上に、バッファサイズをあげる下記コードを追加してみましょう。(Nginxをリバースプロキシにした場合に、リクエストボディのサイズがヘッダーの規定バッファサイズを越えると、エラーを返します。それを避けるために、値を大きくしておきます。)
    client_body_buffer_size     32k;
    client_header_buffer_size   8k;
    large_client_header_buffers 8 64k;

    参考:http://qiita.com/cubicdaiya/items/0678396f11982e537e2d

  6. UnicornとNginxをソケットで繋ぐunicorn.rbファイルを作成します。
    ファイルマネージャーから、/var/www/redmine.example.com/html/config/ へアクセスし、新しいファイルを作成、unicorn.rbという名称で保存します。
    保存したファイルを、メモ帳で開き、下記のコードを入力します。

    #/var/www/redmine.example.com/html/config/unicorn.rb
    
    worker_processes 2
    
    app_path = "/var/www/redmine.example.com/html"
    
    listen File.expand_path('tmp/unicorn.sock', app_path)
    pid File.expand_path('tmp/unicorn.pid', app_path)
    stderr_path File.expand_path('log/unicorn.stderr.log', app_path)
    stdout_path File.expand_path('log/unicorn.stdout.log', app_path)
    
    preload_app true
    
    timeout 30
    
    if GC.respond_to?(:copy_on_write_friendly=)
    GC.copy_on_write_friendly = true
    end
    
    before_fork do |server, worker|
    defined?(ActiveRecord::Base) and ActiveRecord::Base.connection.disconnect!
    
    old_pid = "#{server.config[:pid]}.oldbin"
    if old_pid != server.pid
    begin
    sig = (worker.nr + 1) >= server.worker_processes ? :QUIT : :TTOU
    Process.kill(sig, File.read(old_pid).to_i)
    rescue Errno::ENOENT, Errno::ESRCH
    end
    end
    end
    
    after_fork do |server, worker|
    defined?(ActiveRecord::Base) and ActiveRecord::Base.establish_connection
    end
    

Redmineをデーモンプロセスで起動させます。

sudo -u www-data bundle exec unicorn -c config/unicorn.rb -E production -D

NginxとUnicornを再起動し、http://redmine.example.com へアクセスしてみて、先ほど、3000番ポートで見ることができていた、Redmineの初期ページが表示されていれば、OKです。

これにて、Redfmineのインストールができました。お疲れ様でした。

参考:
https://jyn.jp/ubuntu-redmine/
https://www.crunchtimer.jp/blog/technology/linux/5638/
http://www.torutk.com/projects/swe/wiki/Redmine%E3%82%92CentOS_7%E4%B8%8A%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%99%E3%83%BCUnicorn%E3%81%A8Nginx%E7%B7%A8
https://wiki.archlinux.org/index.php/redmine
http://www.seirios.org/seirios/dokuwiki/doku.php?id=tweet:2016:0212_03







ubuntu16.04にNGINXで作成したバーチャルホストに、WordPressをインストールする

近年のWEBサイトの構築は、Wordpressをインストールすることが多いと思いますので、そのあたりの手順もみておきましょう。

今回は、おさらいを兼ねて、今、conohaのVPSでサーバー環境が整っており、Ajentiが利用できるところで、バーチャルホストを立ち上げてWORDPRESSをインストールするところまでを順にやっていきます。

今回は、外部で正式なSSL証明書を取得した場合を想定して進めていきます。Let’s Encryptで前回のように無料のSSL証明書を取得する場合は、以前の記事を参考にやってみてください。

  1. conohaのVPSコントロールパネルから、Wordpressブログ用のサブドメインをDNSに登録する。
    • conohaのVPSにログインします。
    • DNSメニューを開き、ドメインリストから、example.com(任意のメインドメイン)を開きます。
    • 右上の鉛筆マークの編集アイコンをクリックし、一番左下の+アイコンをクリックして、新しいDNSレコードを追加します。
    • 通常のサブドメインのWEBサイトを立ち上げる予定ですので、レコードのタイプ=Aレコードで、名称は=letsgo、TTLには=3600、値にはVPSサーバーのIPアドレスを入力しましょう。
    • 入力できたら右下の保存ボタンをクリックして、レコードを保存します。
  2. Ajentiの管理パネルを開き、バーチャルホストのWEBサイトを作成する。
    • Ajentiにログインし、WEBサイトメニューから、新しいサイトを追加します。サイトの名称は、分かり安ければ良いです。
      letsgo.example.comとしておきましょうか。
    • 出来上がったWEBサイトの管理画面を開きます。
    • 一般設定タブで、メンテナンスモードのチェックを外します。
    • WEBSITE FILESのパスは、(実際は、自分がわかればどこでも良いのですが)通常は、/var/www/以下にドメインごとのディレクトリを作成して運用するのがわかりやすいと思いますので、/var/www/letsgo.example.com/html/と入力し、ディレクトリ作成ボタンをクリック、続けて、セットボタン、最後に、FIX FILE PERMISSIONSボタンをクリックしていきます。
      これは、順に、WEBサイトのファイルを格納するディレクトリを作成し、それを、このWEBサイトのルートディレクトリとして、Ajentiから自動でconfigファイルに書き込んでもらい、このサイトへブラウザ経由で外からアクセスできるようにアクセス権限を最適化していく、という流れになります。
    • 一番下の APPLY CHANGESボタンをクリックして、一旦変更を確定します。Ajentiの管理パネルでは、最後に設定を反映させるボタンを押し忘れないように気をつけましょう;
    • ドメインタブに移り、letsgo.example.comを新規追加します。
    • ポートタブで、SSL接続用の443ポートを追加します。新しい443ポートを追加し、SSLにチェックを入れてください。
    • (この後、正式なSSL証明書を外部でとった場合の設定を行いますので、SSLタブは一旦飛ばします。)
    • Contentタブから、PHP7.0-FastCGIを選び、+作成ボタンで追加します。
    • 高度な設定タブで、カスタム設定の項目に、下記を入力し保存します。Wordpress用の設定です。
       #Rewriteでパーマリンク設定可能にしておく
      if (!-e $request_filename) { rewrite ^ /index.php last;  }
  3. FTPユーザーを作成する。
    • 続けて、同じくWEBサイトメニューのFTPタブで、FTPユーザー名、パスワードを入力し、パスは、フォルダのアイコンをクリックして先に作成したWEBサイトのドキュメントルートディレクトリ(/var/www/letsgo.example.com/html/)にしておきます。
      ※ここは、そのままでも良いのですが、こうしておくと、FTPでアクセスした際に、このFTPユーザーは、常に初期設定としてWEBサイトのドキュメントルートにアクセスできるようになります。
    • FileZillaなどのFTPクライアントでFTP接続設定をし、接続確認しておきます。(ここまでで通常のFTP接続はできるはずです。後ほど、SSL通信にも対応します)
  4. WordPress用のMySQLデータベースを作成する。
    • 同じくWEBサイトメニューのMySQLタブから、新規データベースを1つ作成し、DBのユーザーとパスワードを追加しておきます。
  5. SSL証明書を取得する。
    • ここまでで一旦Ajentiの管理パネルを抜け、SSL証明書を取得しましょう。
      (SSLの証明書は、証明書の発行元や種類にもよりますが、WEBサイトが実在していないと証明書を発行してくれないものもありますので、先に、バーチャルホストのWEBサイトを作成し、ついでにFTPユーザーとDBの追加までを行いました。先に取得できるタイプの場合は、先に取得してもらって構いません。)
    • 自分の予算や目的にあったSSL証明書を購入します。1,000円程度の安価なものから20万円もするものまで、SSL証明書は様々な種類があります。その差は、認証期間が、WEBサイトの所有者についてどこまでの調査を行い補償対象としているかによります。
    • SSL証明書を購入すると、下記のような形式の長〜い文字が羅列された.crtまたは.pemファイルが送られてきます。あるいは、メールの本文内などに、そのまま記載されて送られてくる場合もあるかもしれません。
      -----BEGIN CERTIFICATE-----Mgtdghjy4524965TTvvkgia・・・・・・(以下略)-----END CERTIFICATE-----

      この、—–BEGIN CERTIFICATE—–から–END CERTIFICATE—–までの部分が、証明書の内容になります。

    • SSL証明書は、証明書と公開鍵がセットになって、お互いの認証が一致した場合に安全な通信を行うものです。一般的には、証明書ファイルとは1つで、共通鍵として、その2つを兼ねています。(※より安全に別の鍵認証を行うタイプもあり)
  6. 証明機関から取得した証明書ファイルを、letsgo_cert.pem(あるいはcert.crt)ファイルとletsgo_priv.pem(あるいはpriv.key)として保存し、サーバーにアップロードする。
    • Ajentiの管理パネルのファイルマネージャーメニューから、下記ディレクトリに、証明書と公開鍵ファイルを、アップロードします。(もしディレクトリが無かった場合は作成します)
      letsgo_cert.crt => /etc/ssl/certs/
      letsgo_priv.pem => /etc/ssl/private/
    • 同じファイルを、pure-ftpd.pemという名称にして、/etc/ssl/private/にアップロードします。これがSFTP用のSSL証明書になります。
      pure-ftpd.pem => /etc/ssl/private/
    • ファイルのパーミションを600に変更します。
    • Let’s Encryptで発行したSSL証明書を使用する場合、証明書ファイルとプライベートキーファイルが、別のファイルになっているため、Ajenti用のSSLファイルを作成した時と同様、fullchain.pemとprivkey.pemの2つを1ファイルに繋げて、pure-ftpd.pemを作成します。
    • すでにajenti.pemを作成している場合は、このファイルをコピーしてリネームしましょう。
  7. FTPSアクセス用にfirewallのpassiveポートを開ける。
    • TLS/SSLで暗号化したファイルをFTPで送受信する場合、ほとんどは、passiveモードでやりとりしますが、passiveモードでは、ポートへのアクセスがランダムになってしまうため、pure-FTPDのconfigファイルとfirewall双方でpassiveモードに使用する解放ポートを合わせ、さらにpure-FTPDのconfigで安全なTLS/SSLアクセスのみを許可する制限を設けましょう。
    • Ajentiの管理パネルで、ファイルマネージャーメニューより、/etc/pure-ftpd/conf/内に、新規ファイルを作成し、ファイル名を、「PassivePortRange」に変更します。
      クリックして、ファイルを開き、編集ボタンをクリック。
      メモ帳で開かれますので、

      #空いているポートで他と被らない範囲を100程度取りましょう。40000台など、おおよそなんでも良いです。
      20000 20100

      と入力し保存します。
      ファイルのパーミションは、644に変更します。

    • 同じ手順で、「TLS」というファイルを作成し、
      #2は、TLS/SSLアクセスのみを許可します。(プレーンなFTPも許可する場合は、1を、入力します。)
      2

      と入力し、保存。パーミションも同じく、644にします。

    • ターミナルで、firewallのポートを開けます。
      #20000から20100ポートを開けます。レンジでポートを開ける場合は、/tcpの指定が必要です。
      ufw allow 20000:20100/tcp
      ufw enable

      Ajentiのサービスメニューから、pure-FTPDを再起動します。

    • FTPS通信でFTPクライアントからアクセスできるか確認しましょう。
  8. FTPクライアントからサイトのドキュメントルートに アクセスして、Worpressをインストールする。
    • WordPressのWEBサイトより、日本語版のWordpressパッケージ(現在の最新パッケージは、wordpress-4.7.3-ja.zip)をダウンロードします。ページ右のダウンロードボタンをクリックして、ファイルを自分のPCにダウンロードしたら、解凍しておきます。
      https://ja.wordpress.org/
    • FTPクライアント(FileZillaなど)からWEBサイトのドキュメントルート(/var/www/letsgo.example.com/html/)へ、解凍された/wordpress/の中身を全てアップロードします。
  9. ブラウザで、https://letsgo.example.comへアクセスし、Wordpressをインストールする。
    • アクセスすると、Wordpressのインストール画面が表示されるので、先ほど作成した、MySQLのデータベース情報を入力します。データベース名=先ほど作成したDB名
      ユーザー名=先ほど作成したDBユーザー名
      パスワード=DBユーザーのパスワード名
      データベースのホスト名=localhost
      テーブル接頭辞:wp_

これにて完了です。

NGINXは、細かな設定ができ、プラグインモジュールを読み込むことで、独自の機能を追加していくことが可能です。
apacheの設定に慣れていると最初はとっつきにくいかもしれませんが、Ajentiを使用して設定する場合は、WEBサイトメニューのWEBサイトの管理画面から高度な設定で、カスタム設定フォームに設定内容を追加していくことで、configファイルが編集されていきます。

また、Ajnetiは、オープンソースのため、まだ日本語の情報が少なかったり、マニュアル的なものが充実していなかったりしますが、UIがわかりやすく、よく考えられたツールでもありますので、今後はもっと普及してくるのではないでしょうか。

一旦、これでバーチャルホストの設定は、完了としますが、また、セキュリティの強化に視点を移して、追加のパッケージインストールなどもやっていきたいと思います。

長らくお付き合いありがとうございました。

<やること一覧>





ubuntu16.04にNGINX+mySQLで作成したバーチャルホストに、PhpMyAdminをインストールする

phpMyAdminをインストールしていきます。

phpMyAdminは、先にconohaのDNSで追加しておいた、https://phpmyadmin.exmple.comでSSL接続する前提です。

それではやっていきましょう!

最初にAjentiの管理パネルの「パッケージ」メニューから、’php-mbstring’を検索し、’インストール/アップグレード用マーク’にチェックを入れ、左上の「適用」ボタンをクリックしてインストールします。(※同時に、php7.0-mbstringもインストールされます。)

ターミナルから同じことを行う場合は、

apt-get -y install php-mbstring

と打ち込みます。インストールできたかどうか、

php -m | egrep 'mbstring'

と打ち込んで確認しましょう。
‘mbstring’と返されてくればOKです。

次に、phpmyadmin.exmple.comのバーチャルホストで、phpが使用できるように、fastCGIを有効にします。

Ajentiにログインしたら、「WEBサイト」メニューより、phpmyadmin.exmple.comの管理画面に入り、「Content」タブの’PHP 7.0 Fast CGI’を作成追加します。
※手順は、前回までの記事を参考にしてください。Ajentiから設定した場合、configファイルへの細かな追記はAjentiが行なってくれるので、基本これだけで大丈夫です。

これで、phpが使えるようになりました。

次に、公式サイトよりphpMyAdminのパッケージをダウンロードして、phpmyadmin.exmple.comのドキュメントルートに解凍展開します。
同じ「WEBサイト」メニューの「一般設定」タブに下記のURLを打ち込み、

https://files.phpmyadmin.net/phpMyAdmin/4.7.0/phpMyAdmin-4.7.0-all-languages.zip

「DOWNLOAD AND UNPACK」ボタンをクリックします。
/var/www/phpmyadmin.example.com/html/の中に、’ phpMyAdmin-4.7.0-all-languages’というディレクトリが作成され、その中に、ファイル一式が入ります。

その中のファイルを全て、1階層上の/html/に移動させます。
Ajentiの「ファイルマネージャー」メニューで、
/var/www/phpmyadmin.example.com/html/phpMyAdmin-4.7.0-all-languages/に移動し、中のファイルを全て選択し、画面上の、「切り取り」(ハサミのマーク)ボタンをクリック。/html/ディレクトリに移動し、「貼り付け」(クリップボードのマーク)ボタンをクリックします。同じ動作で、/phpMyAdmin-4.7.0-all-languages/から/html/へ全てのファイルを「切り取り」「貼り付け」を繰り返して移動します。全て終わったら、クリップボードは’empty’にして、中身が空っぽになった/phpMyAdmin-4.7.0-all-languages/ディレクトリも削除します。

ターミナルから同じことを行う場合は、下記です。

#/var/www/phpmyadmin.example.com/html/ディレクトリへ移動する。
cd /var/www/phpmyadmin.example.com/html/

#phpMyAdminのパッケージをダウンロードする。
curl https://files.phpmyadmin.net/phpMyAdmin/4.7.0/phpMyAdmin-4.7.0-all-languages.tar.gz | tar zx -C /var/www/phpmyadmin.papalabs.xyz/html

#中身を1つ上の/html/直ディレクトリに移動する。 mv /var/www/phpmyadmin.papalabs.xyz/html/phpMyAdmin-4.7.0-all-languages/* /var/www/phpmyadmin.papalabs.xyz/html

#空になった、phpMyAdminのフォルダを削除する。 rm -rf phpMyAdmin-4.7.0-all-languages

以上です。

ブラウザから、https://phpmyadmin.example.comへアクセスすると、phpMyAdminの管理画面へのログインページが開きます。

今回、phpMyAdminは、サーバー全体にアクセスできるようにインストールされています(というかmySQLが1つのサーバーとしてVPSにインストールされており、phpMyAdminは、そのDBへアクセスしていく)ので、各WEBサイトでDBを作成すると、作成したDBのユーザー名とパスワードでそのDBにアクセスできます。

Ajentiの「WEBサイト」メニューから、DBを作成したいサイトの管理画面を開きます。
「MySQL」タブをクリックし、DB名を入力して、DBを作成し、ユーザー名とパスワードを入力して、DBユーザーを作成します。下の「APPLY CHANGES」ボタンをクリックして確定します。
ここで作成した、DBとユーザーは、「ソフトウエア」の[MySQL」メニューからも確認できます。

作成したユーザーとパスワードでphpMyAdminにログインすれば、phpMyAdmin経由でデータベースの管理が可能です。

作成したDBを削除したい場合、Ajentiの管理画面からは、2つの操作が必要です。
「WEBサイト」メニューの「MySQL」タブから、DBとユーザーを削除し、「APPLY CHANGES」ボタンをクリックして確定します。=>これで、ウェBサーバーのconfigファイルから該当する設定が削除されます。
さらに、「ソフトウエア」の[MySQL」メニューからもDBとユーザーを削除します。

※個人的には、本来、「WEBサイト」メニューからの操作だけで、追加や削除ができているべきだと思うのですが、試してみたところ、それだけではデータが残っているようなので、どちらの操作も行なっておく方が良いと思います。

<やること一覧>