Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブssl

2018年5月28日 By KD コメントを書く

HerokuアプリにSSLを設定する方法

HerokuアプリにSSLを設定する方法

Herokuにアプリケーションをデプロイし、独自ドメインを割り当てたら、次にやることはSSL化でしょう。今回はHerokuアプリにSSLを設定する方法を紹介します。

はじめに

HerokuアプリをSSL化するには有料の方法と無料の方法があります。有料の方法はHerokuが用意している正攻法、無料の方法は他のサービスを利用した少し手の込んだ方法です。今回はHerokuアプリをSSL化する上で一般的な前者の方法を紹介します。

HerokuアプリにSSLを設定する

前提として、すでにアプリケーションをデプロイしたdynoがあるものとします。それでは始めましょう。

無料のdynoの設定を確認する

Herokuのサイトにログインし、対象のHerokuアプリ(dyne)のSettingsを確認します。

Heroku7

SSLの欄には「Upgrade to paid dynes to configure Heroku SSL」と書かれている通り、無料枠ではSSLの設定はできませんが、有料にアップグレードすればSSLが設定できることが分かります。

dynoをアップグレードする

対象のHerokuアプリ(dyne)を選択し、「Upgrade」を選びます。SSLの設定を可能にするには、HobbyでもProfessionalでもどちらでも良いのですが、今回はHobbyを選択します。

Heroku6

SSLを有効にする

対象のHerokuアプリ(dyne)のSettingsを選び、「Configure SSL」をクリックします。

Heroku5

今回は「Automatically」を選択し、「Continue」をクリックします。SSL証明書を自分で用意する場合は「Manually」を選んで下さい。

Heroku4

「I’ve done this」をクリックします。

Heroku3

「Continue」をクリックします。

Heroku2

これでSSLの設定は完了です.

SSLが正しく設定されていることを確認する

ブラウザで確認してもよいですが、curlコマンドでSSLが正しく設定されていることを確認します。Herokuアプリのドメインが「www.yourdomain.com」であると仮定した場合のコマンドは以下のようになります。

$ curl -kvI https://www.yourdomain.com
* Rebuilt URL to: https://www.yourdomain.com/
*   Trying XXX.XXX.XXX.XXX...
* TCP_NODELAY set
* Connected to www.yourdomain.com (XXX.XXX.XXX.XXX) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* Cipher selection: ALL:!EXPORT:!EXPORT40:!EXPORT56:!aNULL:!LOW:!RC4:@STRENGTH
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/cert.pem
  CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Client hello (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES128-GCM-SHA256
* ALPN, server accepted to use http/1.1
* Server certificate:
*  subject: CN=www.yourdomain.com
*  start date: Apr 11 06:37:11 2018 GMT
*  expire date: Jul 10 06:37:11 2018 GMT
*  issuer: C=US; O=Let's Encrypt; CN=Let's Encrypt Authority X3
*  SSL certificate verify ok.
...

SSLの設定を確認できました。気づいた人もいると思いますが、後で軽く紹介するLet's Encryptというサービスを利用してHerokuはSSL化を自動で行っています。詳しくは公式サイトを参照して下さい。

無料でSSLを設定するには?

ここまでは、Herokuのdynoをアップグレードする(課金する)という、一般的な方法を紹介してきました。よっぽどお金に困っていなければこれで良い気がしますが、どうしても無料で何とかSSLにしたいという人は、以下の代替案もありますので、調べてみて下さい。

  • Let's Encryptというサービスを使う
  • Cloudflareというサービスを使う

最後に

いかがでしたか?HerokuのSSLの設定はお金さえ払えば非常に簡単に行なえることが分かったと思います。いまやSSL化は必須の時代になっていますので、覚えておくと良いでしょう。では。

カテゴリ : 技術 Tips & Tutorials タグ : heroku, ssl

2018年1月12日 By KD コメントを書く

XserverとWordPressのSSL設定と保護された通信にならない場合の対処法

XserverとWordPressのSSL設定と保護された通信にならない場合の対処法

Google主導のもと、SSLじゃないサイトは排除される流れになっています。SSLはセキュリティ強化なので、ユーザのことを考えれば当然の流れとも言えます。今回はXserverにWordPressを構築されている場合のSSL化の方法を紹介します。

XserverとWordPressでSSLを設定する

そもそもXserver (Xdomain) を選んだ人はすでにSSL化を見込んでいますよね?なぜならXserver (Xdomain) ではSSL化が無料だからです。個人のブログにおいては十分で、SSL証明書を購入する必要はありません。

Xserverの設定

まず、ServerPanelにログインし、以下の「ドメイン -> SSL設定」を選択します。

スクリーンショット 2017 12 24 17 40 18

後はSSL化したいドメインを選択して、SSLを有効化すれば完了です。簡単ですね。

WordPressの設定

WordPressの「設定 -> 一般」から、以下のURLを「http -> https」に変更します。

  • WordPress アドレス (URL) : https://yoursite.com
  • サイトアドレス (URL) : https://yoursite.com

スクリーンショット 2017 12 23 14 31 55

ここまででSSLの設定は完了です。

なぜか「保護された通信」にならない場合の対処法

今までの手順でSSH化は完了し、URLは「http -> https」に変化している思います。しかし、今までに記事をある程度書いている場合は、以下のように「保護された通信」にならない場合があります。

スクリーンショット 2017 12 23 13 40 51

この原因は、ブログのどこかにSSLじゃない通信(httpで始まるURL)が含まれていることが原因です。

試しにChromeブラウザでサイトを表示し、「option+command+I」でエラーが無いか確認してみましょう。以下のように「Mixed Content」のエラーが出ていれば想定通りです。これは記載の通り、httpsとhttpがミックスしているという意味ですね。

スクリーンショット 2017 12 23 13 35 39

あとはhttpのURLを直すだけなので、地道に投稿一覧からエラーの記事を開いてURLを直していくか、あるいは、httpをhttpsに置換するだけで十分な場合はWordPressの以下のプラグインで一括置換ができます。

Search Regex
Search Regex
Download QR-Code
Search Regex
Developer:
Price: Free

もしプラグインで一括置換をする場合は、後で元に戻せないので、慎重に実施して下さい。

URLの修正が全て完了してURLを見ると。。。

スクリーンショット 2017 12 23 16 03 25

「保護された通信」と表示されていますね。これでSSL化は完了です。

最後に

Xserver (Xdomain) を代表するように最近のレンタルサーバはサービスが良いです。今の時代SSLにしないという選択肢は存在しないため、レンタルサーバの無料SSL化は必然ですが、まだ対応していないところも多いので、レンタルサーバ選びの際には気をつけて下さい。

カテゴリ : ライフハック タグ : ssl, wordpress, xserver

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • FacebookログインのJavascriptのSDKをサクッと試す方法
    FacebookログインのJavascriptのSDKをサクッと試す方法
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • [tips][bat] バッチで明日の日付を計算する。
    [tips][bat] バッチで明日の日付を計算する。

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes