Help us understand the problem. What is going on with this article?

そろそろaws初めてみよか#5~Cloud9環境での実行~

はじめに

awsと戯れる会も第5回目(^^♪
Cloud9環境でちゃんと開発できるようCloud9のインスタンスにもlaravel環境をセットアップしましたが
肝心のlaravel実行まではできませんでした。
今回はこの肝心の部分の記事になります♪

以前の記事はこちらから
- そろそろaws初めてみよか~まずは触れてみた~
- そろそろaws初めてみよか#2~CodeStarによるコード修正からDeployまで~
- そろそろaws初めてみよか#3~RDSとの接続~
- そろそろaws初めてみよか#4~Cloud9環境の整備~

Cloud9のビルトインサーバでの起動

Run>Run with>PHP (build-in web server)を選択します。

01.png

下ペインに現れる[New]タブの[CWD]をクリックし、ドキュメントルートphp-laravel/publicを選択します。
02.png

上のメニューからPreviewをクリックしブラウザを表示させます。
Oopsとか表示されますが、ポート番号があっていないためなので気にしない気にしない。
03.png

PHP (build-in web server)は下ペインのメッセージにある通り
Listening on http://0.0.0.0:8080
となっていますので、プレビューのURL欄をクリックし「:8080」を追加します。

04.png
04.5.png

それっぽい画面が出てきましたが…スクリプトも画像も読み込まれていません。
Chromeの別タブで同URLを表示させ、ソース表示すると判りますが
ページのURLはhttpsなのに対し、リソースのパスがすべてhttpとなっていることが原因でした。

04.6.png
04.7.png

laravelでassetとかのパスをhttpsで出力する

assetとかで指定したアドレスがことごとくhttpになっているのでhttpsになるようlaravel側で対応します。

具体的には此方の記事を参考にさせて頂きました。
Laravel5.3でSSL通信を強制する

修正したのはAppServiceProviderのboot()の定義となります。
なお本番環境にデプロイした際はhttpだったのでここではapp.envがlocal,stagingの場合のみhttpsにするとしています。
本来の商用環境ではELBも入りhttpsになると思うのでその際は修正が必要となります。

app/Providers/AppServiceProvider.php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

修正後

app/Providers/AppServiceProvider.php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //

        if (config('app.env') === 'local' || config('app.env') === 'staging') {
            \URL::forceSchema('https');
        }
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

これで確認するとこんな感じで正常に表示されます。
どうやらIDE内のブラウザではsvgが動かないっぽいので、動確するなら別タブで開いた方がよさそうですね!

05.png

06.png

07.png

これで本当の意味で開発環境を作ることができました!

imp555sti
SEで小規模Web開発を行っていましたが激務が災いして病休。その後復職しましたが今は開発SEから運用に配置換えして基本的には平和な日々(のはず…)を送っています(笑) と思っていたら開発にお呼びがかかり…開発に戻されましたとさ…どうなることやら(苦笑)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした