difficult points that make static website, using Route53, CloudFront, ACM and S3 via https

i think, there are some difficult points make https static website using Route53, CloudFront, ACM and S3.

so i searched and writing knowlege in this blog.

Route53

can’t select CloudFront distributions at CNAME Alias, after setting CloudFront.

please set Alias ” No “, and set CloudFront Domain Name in Value.


ACM

please set region US East (N. Virginia) when you get certificate.

if you other region you set, you can’t  select certificate in CloudFront AWS conslole.


CloudFront

can’t set certificate, after you get certificate at US East (N. Virginia) region.

answer 1:

please wait few days.

if you get certificate at Certification Manager, you can’t select in CloudFront immediately.

i waited few days and i could selected it.

 

ansewer 2:

you upload certificate by aws acli.

maybe you can select certificate at CloudFront AWS console immediately.

but i don’t try this method.

https://aws.amazon.com/premiumsupport/knowledge-center/custom-ssl-certificate-cloudfront/

displayed file list of XML, via CloudFront

please set ” Default Root Object ” at CloudFront AWS console.

example, ” index.html “.

Access Deny occur, when you access your domain.

please set ” Alternate Domain Names (CNAMEs) ” your domain at CloudFront AWS console.

Access Deny occur via CloudFront

please public access setting, at S3 object and bucket at S3 BucketPolicy.

i setting every thing, but i can’t access.

there is possibility used cache at CloudFront.

so remove cache at Invalidation tab of CloudFront console. and input ” /* “.


S3

you can access “static website hosting” url. but can’t via CloudFront.

there is possibility, you did’t setting public access policy at S3 object and S3 bucket.

so you setting public access setting at it.

if you have too many object.

using aws cli command is very useful.

aws s3 sync . s3://my-bucket/path –acl public-read

error occur when public access setting at S3 bucket.

please select ” false ” at Piblic access settings of Permissions.

this function is add AWS console, at November 18th, 2018.

Route53 + CloudFront + ACM + S3 で https する際にハマったこと

ネットの記事をみながら構成していくなかで、ハマったこと

Route53

CloudFront の設定が終わって、Route53 で、登録したドメインの CNAME に、CloudFront のドメイン名を登録するときAlias を選択しても、Target の候補に CroudFront が出てこない。

Alias No を選択して、Value CloudFront のドメイン名を入力しよう。


ACM

証明書をとるときは、リージョンを「バージニア北部」にしよう。

そうしないと、CloudFront の画面で取得した証明書を選択できない。


CloudFront

バージニア北部」で証明書を取得しても CloudFront の画面で設定できない。

解決方法1:

待つ。

ACM で証明書を取得しても、すぐには CloudFront の画面で選択ができない。

私は 1,2 日待ったら選択できるようになりました。

 

解決方法2:

手動でアップロードする。

私は試してないですが、手動でアップロードすることですぐに反映されるみたいです。

Amazon CloudFrontの独自ドメインSSL証明書をAWS CLIでアップロードする

CloudFront 経由で S3 にアクセスしたら、ファイル一覧の XML が表示される。

解決方法:

CloudFront の設定画面で、「Default Root Object」を設定しましょう。

例えば、index.html など。

取得したドメインで、CloudFront 経由でアクセスすると AccessDeny になる。

CloudFront Alternate Domain Names (CNAMEs)」に、

アクセスしたいドメインの値を設定しましょう。

CloudFront 経由で AccessDeny になる。

S3 バケットポリシーで、オブジェクトとバケット全体を、パブリック公開設定にしましょう。

もろもろ設定したけど、やっぱりダメだ。

CloudFront でキャッシュが残っている可能性があります。

CloudFront Invalidations “/*” を設定して、全てのキャッシュを削除してみましょう。


S3

static website hosting url にはアクセスできるが、CloudFront 経由でアクセスできない。

バケットと、オブジェクトがパブリック公開になっていない可能性があります。

バケットポリシーを公開設定にして、各オブジェクトを公開設定にしましょう。

オブジェクトが大量にある場合は、 aws cli を用いてコマンドでサイドアップロードするのが手っ取り早いです。

aws s3 sync . s3://my-bucket/path  –acl public-read

バケットポリシーを公開設定にしようとするが、エラーになる。

「アクセス権限」の「パブリックアクセス設定」を全て false にしましょう。

この機能は、201811/18から AWS に追加されました。

Laravel の apache 設定

チュートリアルを進めていて、/tasks の URL に遷移しても、

index.php ではなく、/public/tasks にアクセスしようとしてしまう場合。

 

公式ドキュメント

https://readouble.com/laravel/5.1/ja/installation.html

にも書いてあるが、.htaccess が動作していない可能性がある。

そのときには、apache の .conf ファイルに下記のように設定をする。

<VirtualHost *:80>
    DocumentRoot /path/to/public/
    ServerName foo.example.com
    <Directory /path/to/public>
        Options Indexes
        AllowOverride None
        Require all granted

        Options +FollowSymLinks
        RewriteEngine On

        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^ index.php [L]
    </Directory>
</VirtualHost>

【コネヒトーク3rd「ここでしか聞けない!ブランド化するサービスの裏側を大公開」】に行ってきました

コネヒトーク3rd「ここでしか聞けない!ブランド化するサービスの裏側を大公開」

https://connehito.connpass.com/event/104037/

に行ってきたので、そのときのレポート

 

TKY+N LAB & DESIGN inc.  代表 タカヤ・オオタ さんから

Corporate IdentityCI)について

3つの要素で作られている。

  • mind identity
    どのような意思をもって作られているのか?
  • behavior identitiy
    我々はどんな行動をとるのか?
  • visual identity
    どんなロゴがいいか?全体的にどのようなトーンでつくればよいのか?

その中の一つとして、ロゴっていうのもあるということ。

なぜ、スタートアップのCIを担当しているのか?

  • 社会に対しての課題を明確にしているから思想が現れやすい。
  • story が大事。

UIの体系化と飽和化

いろんなUIが出てくるのが、昨今激しくなっている。

例えば、kurashiru と delish kitchen で比べたときに

こっちでできることがこっちでできないということが薄くなってきた。

これまでは、機能優位性で戦って来たが、これが飽和化してくると

使う理由が「ブランド」になってくる

なので、ブランドデザインは大事

株式会社Hotspring 代表取締役 有川鴻哉 さんから

事例照会

いま、ズボラ旅というサービスを展開している。

ブランディングを意識したサービス作りについての話をしようと思います。

私が考えるブランディング

  • サービスを主観ではなく第三者の目線で捉える
  • ものごとを考えるときの主語を「ユーザー」「社会」にする。
  • それによって、社会にどういう変化が起きるのか(小さなものでもいいから)を意識する。

 

ズボラ旅はLINEで完結するサービス

UILINEのまま。

ブランドを伝える唯一の手段はLPだけ?

 → ブランドのみで戦う。

ブランディングは見た目だけじゃなくて

サービスのアピールとかも含まれる。

ブランディングドリブンなサービス作り

全てはプレスリリースから

最初に、

機能追加することよりも、プレスリリースのような記事を書いてみるのが大事。

  • 機能、サービスを一言で表す
  • どんなメリットがあるのか、どんな社会になるのか
  • なぜ今そのサービスが必要なのか?機能追加するのか?理想と現実のギャップを埋める

一人よがりのコミュニケーションにならないようにしよう

誰に何を伝えて、どんなアクションをしてほしいか?それだけ徹底的に考えましょう。

例えば、「xx億円調達しました!」とかだけだとダメ。

それによってどのように社会が変わるのかを伝えないとダメ。

応援される、愛されるためのひと手間

これをやることでユーザに愛されるサービス作りができる。

サービスの中には必ず「人」がいる
その人を感じとってもらえるようにしよう

正直であること

サービスや昨日は失敗することもあります。
けど、そこで、どうして失敗したんだということを問いかけることが大事。

事例として、キャンペーンをやったが全然盛り上がらなかった。

  • twitter で、「キャンペーンのハードル高い?」と聞いてみた。
    • 「そもそもキャンペーンってなに?」という回答が多かった。
    • 質問をすることで、ただのキャンペーンとみせかけて、ユーザに知らせることもできる。
    • 素直に、ギャップがあったのでリトライさせてくださいということを伝える。
    • アンケートに答えることで、自分が協力したので、もう一回行ってみよう感をユーザに出すことができる。

コネヒト株式会社 代表取締役社長 大湯俊介 さんから

「ママリにおけるリブランディング」

世に出たサービスのリブランディングについて

2018年にリニューアルをした。

裏側公開ということなので、そういう話をしようと思います。

 

ママリはいま、世の中のママの3人に1人くらいが使っているサービス

業界最大なのに、軸がなかった。

そうすると、あらゆる場所でブレが生じてしまった。

  • 社外発信についてだったり
  • コンテンツの記事の内容だったり
  • 営業の人の性格性だったり。

そこで一旦、サービスの軸を決めようとなった。

その手段としての、リブランディング。

ユーザ、全従業員を巻き込んでつくった。

ユーザへのアンケートも行なった。

ママリはどういうサービスか?ということを twitter で聞いた。

また、従業員(当時半分くらいがユーザに近い存在)にアンケートもとった。

結果、そこから、

「ママの一歩を支える」

というテーマと、それを説明する文章を作った。

軸も作った

  • 自ら選ぶための知識を提供する
  • 一歩踏み出す自信を育む
  • 行動したママを受け入れる社会をつくる

ロゴについても、軸に則したストーリーも埋め込んだ

リブランディングをしたことによって

みんなの焦点が合うようになった。

まとめ

リブランディングは

  • サービスの使命を組織内にも浸透させる絶好の機会
  • 軸を起点にした新しい未来がみつかる好機

パネルディスカッション

質問に対しての Q & A 形式でパネルディスカッションが行われた。

Q1.

リブランディングの数字、KPIについてどういうふうに定めていますか?

A1.

オオタさんから

社内での意識だったり、ユーザの声を形にして落とせたか?という話のほうが大きいと思う。

指標でいうと、そのシンボルはどのように今後使えるのか?いろんなところに露出したときにクリエイティブとして使えるのか?ということをみたりする。

有川さんから

今後軸を考える上で、どのくらい使いやすくなったか?というところから測れると思う。

大湯さんから

発信に使いやすいとかの設計ができてるとか、どういう人に使ってほしいんだっけということを考えるのが大事なのかなと思う。

 

Q2.

「ママの一歩を支える」ということに、日々の業務が繋がっていることを意識するために工夫していることはありますか?

A2.

オオタさんから

特になし。

有川さんから

プレスリリースしてみるかな。

文章にしてみて、それと照らし合わせて、繋がりを感じたりしている。

大湯さんから

ワークショップを行なっている。

必ず集まって月一回やっている。昔から。

毎回テーマを決めて、サービスについて考えるということをしている。

昼休み開けにみんなで 10 分アプリを使いましょうとか。

そういうところで、理念を感じるようにしている。

つまり、接触頻度と角度を高くすること。

 

Q3.

これは難しいなと思うことはあるか?

A3.

オオタさんから

Payme

SNSは面白くないなと思っている。

それを超えることは難しい。

カジュアルでありながら、発信したいことを出せているのか?ということが難しい。

有川さんから

それを、デカくなっても支えられる土台が大事だと思っている。

大湯さんから

人っぽくするのが難しい。

人っぽくするからミスもある。

人の感じは親しみを出すために出したほうがいい。

形式張ったものだと、人はミスに耐性がない。

 

Q4.

リブランディングを外に押し出す理由は?ぶっちゃけお客さんには関係ないよね?みたいな意見もあると思うが。

A4.

オオタさんから

社内だけで済む。だと一方通行になってしまう。

一方通行にしないことで、外を意識することができる。

そのサービスがどういう目をもっていているのかというのを表明する必要があると思う。

有川さんから

特になし。

大湯さんから

巻き込んだほうがいいと思っていて、

途中でのリブランディングだったので、ユーザと一緒に作ったんだよ感を出したかった。

ちょっと参加したことで、自分(ユーザ)も協力したんだよっていうことをして

仲間を増やすことができる。

 

Q5.

プロダクトドリブンだなと思った。プロダクトが先か?ブランドが先か?でいうとどう思っている?

A5.

オオタさんから

どちらが先というよりも、並走だと思う。

何でブランドやるかというと、プロダクトを伸ばした上で、さらに効率よく世の中に広まりやすいとかいうメリットがある。

有川さんから

サービスがあることによってなので、当然プロダクトから入ると思う。

それをより効率的に社会に出したいとか思うと、相乗効果があると思う。

大湯さんから

リブランディングは超大変です。

そういう意味でいうと、最初からちゃんと設計するべきものだとは思った。

ただ、ブランディングは後から付いてくるものだとも思っている。

最後に

Q6.

2020年を見越して、こういうデザインがいいんじゃないの?と思っていること

A6.

大湯さんから

VRが普及してくると思う。

普通の縦型のデザインから横型のデザインになるんじゃないかと想っている。

5gに関連してて、動きが大事になると思う。

動いているなかでも映えるデザインとか、そういうのがくると思っている。

有川さんから

デバイス依存が激しい。例えばiphoneとか。

あと2年くらいで、デバイス依存から解き放たれると思う。

目には見えないような部分でサービスが表現されていくと思う。

コミュニケーションだったりがそれにあたる。

そういう概念が生まれると思う。

オオタさんから

スタートアップをよく担当している理由としては

アイコン勝負なところがあるから。

ただ、今後はリアルな空間に今後サービスが出て行くとしたら、今のアイコンは映えないなと思う。

空間に依存していないデザインというのが重要になってくると思う。