質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

SSL

SSL(Secure Sockets Layer)とは、暗号化されたプロトコルで、インターネット上での通信セキュリティを提供しています。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

Q&A

解決済

1回答

2545閲覧

ActiveStorageにてHTTPS経由で画像を表示

napojin

総合スコア12

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

SSL

SSL(Secure Sockets Layer)とは、暗号化されたプロトコルで、インターネット上での通信セキュリティを提供しています。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

0グッド

0クリップ

投稿2019/07/08 11:38

編集2019/07/08 11:40

前提・実現したいこと

certbot-nginxでnginx設定への自動書き込みを行い、ssl証明書を発行し、httpsでアクセスできるようにしたところ、activeStorageの画像がhttp://[domain]/rails/active_storage/blobs/xxxxxxxxxx/image.jpg
で表示されるために

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS
「混合コンテンツ: '<URL>'のページはHTTPS経由でロードされましたが、安全でない画像 '<URL>'を要求しました。このコンテンツもHTTPS経由で配信する必要があります」

というエラーが起きます。
activestorageの画像urlを強制的にhttpsにする方法を教えていただきたいです。
なお、それ以外の部分は正しく表示されています。

###写真
https://gyazo.com/4ab07bc80e1acc524463e843ae2fc103

環境

Amazon Linux 2
Rails 5.2.1
ruby 2.4.2
(アプリケーション、ウェブサーバー)
nginx version: nginx/1.12.2
unicorn 5.5.1
(ssl証明書)
python2-certbot-nginx 0.34.2-1.el7
certbot 0.34.2-3.el7certbot-nginx 0.34.2-3.el7

発生している問題・エラーメッセージ

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure resource '<URL>'. This request has been blocked; the content must be served over HTTPS.

該当のソースコード

(発行した証明書情報) Certificate Name: [domain] Domains: [domain] Expiry Date: 2019-10-06 09:16:15+00:00 (VALID: 89 days) Certificate Path: /etc/letsencrypt/live/[domain]/fullchain.pem Private Key Path: /etc/letsencrypt/live/[domain]/privkey.pem certbot 0.34.2-3.el7certbot-nginx 0.34.2-3.el7
(/etc/nginx/conf.d/myapp.conf) # log directory error_log /var/www/rails/myapp/log/nginx.error.log; access_log /var/www/rails/myapp/log/nginx.access.log; # max body size client_max_body_size 2G; upstream app_server { # for UNIX domain socket setups server unix:/var/www/rails/myapp/tmp/sockets/unicorn.sock fail_timeout=0; } server { server_name [domain] [IP]; # nginx so increasing this is generally safe... keepalive_timeout 5; # path for static files root /var/www/rails/myapp/public; # page cache loading try_files $uri/index.html $uri.html $uri @app; location @app { # HTTP headers proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_redirect off; proxy_pass http://app_server; } # Rails error pages error_page 500 502 503 504 /500.html; location = /500.html { root /var/www/rails/myapp/public; } listen 443 ssl; # managed by Certbot ssl_certificate /etc/letsencrypt/live/[domain]/fullchain.pem; # managed by Certbot ssl_certificate_key /etc/letsencrypt/live/[domain]/privkey.pem; # managed by Certbot include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot } server { if ($host = [domain]) { return 301 https://$host$request_uri; } # managed by Certbot listen 80; server_name [domain] [IP]; return 404; # managed by Certbot }

試したこと

1: fileアップロード先であるs3にてプロパティ -> static website hosting設定にて
「ウェブサイトのホスティングを無効」 から バケットを指定してhttpsプロトコルにリダイレクト
に変更。

2: Railsのconfig/environments/production.rbにて以下を追記

Rails.application.configure do
config.default_url_options[:protocol] = 'https'
...
end

3: アクセス権限->CORSの設定にhttp以外にもhttpsでの許可を追加した
...
<CORSRule>
<AllowedOrigin>https://xxxx</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>

4: config/initializersにforce_ssl.rbというファイルを新規作成
( https://medium.com/@stacietaylorcima/rails-active-storage-serve-your-images-over-https-14b916c67a51 を参考にした)

(force_ssl.rb)
if Rails.application.config.force_ssl
Rails.application.routes.default_url_options[:protocol] = ‘https’
end

補足情報(FW/ツールのバージョンなど)

起きている問題はこちらの記事と同じものと思われますが、こちらの解決法を真似しても効果はありませんでした。
https://medium.com/@stacietaylorcima/rails-active-storage-serve-your-images-over-https-14b916c67a51
こちらの記事が記載していないプラグインもしくはバージョンの違いがあるのかもしれません。わかる方よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

設定ファイルでプロトコルをhttpsにしてもactiveStorageの画像はhttpのままだったので、結局、相対パスを使ってwebページのプロトコルが引き継がれるようにしました。herokuで使ってたときは、何も気にせずにきちんとhttpsで表示されてたんですが...
とにかくエラーやトラブルはなさそうなので、これで行きます。

投稿2019/07/11 09:06

napojin

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問