Casual Developers Note

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

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

2018年7月13日 By KD コメントを書く

SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法

SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法

独自ドメインのメールアドレスはさまざまな場面で必要になります。今回は、格安でお馴染みのSAKURAのメールボックスを利用して、独自ドメインのメールの設定と、Gmailでその独自ドメインのメールを送受信するための設定を紹介します。

はじめに

フリーのメールアドレスよりも独自ドメインのメールアドレスの方が信頼度が高いことは言うまでもありません。個人でプライベートに使う場合や、小さいビジネスオーナーの場合であれば、月たったの86円で利用できるSAKURA(さくらのレンタルサーバ )のメールボックスは良い選択肢です。

そのままSAKURAのウェブメールで独自ドメインを運用してもよいですが、Gmailと連携してGmailで送受信を可能にすることで、利便性を向上させると同時にメールの保存容量をかさ増しできます。

それでは、進めていきましょう。

前提

以下の申し込みや設定が完了している必要があります。

  • SAKURA internet(さくらのレンタルサーバ )のメールボックスに申し込み済みであること
  • 独自ドメインを取得済みであること(Value-Domainやムームードメインなど)
  • 新しいGmailのアカウントが作成済みであること

新しいGmailですが、今回は独自ドメインのメールとGmailを一対一の関係で使用します。

独自ドメインのメールの設定

SAKURA internetに独自ドメインを設定する

サーバコントロールパネルにログインします。

Sakura1

「ドメイン/SSL設定 -> 新しいドメインの追加」をクリックし、「ドメインの追加へ進む」を選択します。

Sakura3

ドメインの追加画面から、「ドメイン名」(仮にcustomdomain.comとします)を入力し、「送信する」をクリックします。

Sakura4

ドメイン設定画面から、「SPFレコードを利用する」を選択して、「送信」をクリックします。

Sakura5

次に独自ドメインを使ったメールアドレスを作ります。「メールアドレスの管理」から「メールアドレスの追加」で独自メールアドレスの頭(仮にinfo)を入力して、パスワードを入れて、「追加」をします。

Sakura8

これで独自ドメインメールの設定は完了です。

SAKURA internet(さくらインターネット)のサーバ情報を確認する

「サーバ情報の表示 -> サーバに関する情報」を表示します。

Sakura2

以下の情報をメモって下さい。(例です)

  • アカウント: example
  • 初期ドメイン: example.sakura.ne.jp
  • ホスト名: wwwXXXX.sakura.ne.jp

Value-Domain(バリュードメイン)の場合の設定

Value-Domainに次にサーバ情報をDNS側にMXレコードとTXTレコード(SPFレコード)として設定します。

以下の情報を設定します。

  • mx [初期ドメイン]. 10
  • txt @ v=spf1 a:[ホスト名] ~all
[初期ドメイン]と[ホスト名]に例の値を入れると以下のようになります。

mx example.sakura.ne.jp. 10
txt @ v=spf1 a:wwwXXXX.sakura.ne.jp ~all

実際の画面は以下のようになります。

Valuedomain1

これで完了です。

ムームードメインの場合の設定

次はムームードメインの場合です。同じく、サーバ情報をDNS側にMXレコードとTXTレコード(SPFレコード)として設定します。

以下の情報を設定します。

1行目

  • 識別: MX
  • 内容: [初期ドメイン]
  • 優先度: 10

2行目

  • 識別: TXT
  • 内容: v=spf1 a:[ホスト名] ~all
[初期ドメイン]と[ホスト名]に例の値を入れると以下のようになります。

1行目

  • 識別: MX
  • 内容: example.sakura.ne.jp
  • 優先度: 10

2行目

  • 識別: TXT
  • 内容: v=spf1 a:wwwXXXX.sakura.ne.jp ~all

実際の画面は以下のようになります。

Mumudomain1

Amazon Route53の場合の設定

AWSのRoute53のコンソールから、対象のドメインを選択して、「Create Record Set」から以下の2つのレコードをそれぞれ追加します。

以下の情報を設定します。

MX – Mail exchange

  • 10 [初期ドメイン].
[初期ドメイン]に例の値を入れると以下のようになります。

10 example.sakura.ne.jp.

TXT – Text

  • “v=spf1 a:[ホスト名] ~all”
[ホスト名]に例の値を入れると以下のようになります。

"v=spf1 a:wwwXXXX.sakura.ne.jp ~all"

実際の画面はそれぞれ以下のようになります。

MX – Mail exchange

Route53 mx

TXT – Text

Route53 txt

それぞれ「Create」をすれば完了です。

これで2日程度で独自ドメインのメールが使用可能になります。

Gmailで独自ドメインのメールを送受信する

SAKURA internet(さくらインターネット)のメール転送設定をする

サーバコントロールパネルから、「メールアドレス毎の設定」を選択し、「ウェブメール」をクリックして開きます。

「設定」から「メールの転送 -> 新規作成」で、転送するGmailのメールアドレスを設定します。

Sakura6

これで、独自ドメイン宛に来たメールはGmailに転送されるようになりました。

Gmailを独自ドメインで返信可能にする

最後にGmailから独自ドメインとしてメールを返信できるようにします。

まずは右上の設定を選択します。

Gmail1

「アカウントとインポート」から「他のメールアドレスを追加」をクリックします。

Gmail2

以下を入力して、「次のステップ」をクリックします。

  • 名前: メール返信時に表示される名前(任意)
  • メールアドレス: info@custom domain.com(独自ドメインメール)
  • エイリアスとして扱います: チェック

Gmail3

以下を入力して、「アカウントを追加」をクリックします。

  • SMTPサーバー: example.sakura.ne.jp(初期ドメイン)
  • ユーザー名: info@custom domain.com(独自ドメインメール)
  • パスワード: infoのパスワード(独自ドメインメールのパスワード)
  • TLSを使用したセキュリティを保護された接続: 選択する

Gmail4

独自ドメインメール宛にGmailから確認メールが届くので、リンクをクリックするか、確認コードを入力すれば追加が完了します。

Gmai5

最後に、追加した独自ドメインメール(info@customdomai.com)を「デフォルト」に設定し、「デフォルトの返信モードを選択」で「常にデフォルトのアドレスから返信する」を選びます。

Gmail6

これで、Gmailから独自ドメインメールで送受信できるようになりました。

おまけ

Macの「メール」の環境設定

Macで「メール」を利用する場合に、送受信したメールがSAKURAのメールボックスとうまく同期されないトラブルが発生した場合は、以下の設定を確認しましょう。

「メール」->「環境設定…」から以下のように設定されていれば正常です。

アカウント情報

NewImage

メールボックスの特性

NewImage

サーバ設定

NewImage

最後に

いかがでしたか?これでSAKURAのメールボックスで設定した独自ドメインのメールアドレスをGmailで送受信できるようになりました。格安で独自ドメインのメールを運用できるなんて助かりますね。では。

カテゴリ : ライフハック タグ : gmail, muumuu-domain, route53, sakura-internet, value-domain

2018年7月9日 By KD コメントを書く

Amazon S3で静的コンテンツを独自ドメインでSSL化してホスティングする方法(S3 + CloudFront + Route53 + ACM)

Amazon S3で静的コンテンツを独自ドメインでSSL化してホスティングする方法(S3 + CloudFront + Route53 + ACM)

静的サイトを作ったら、それをホスティングする必要があります。個人の趣味サイトなら簡単で無料の方法はGithub Pagesですが、もう少し真面目に静的コンテンツを管理してホスティングしたいのであればAmazon S3は有力な選択肢になります。今回は、S3で静的コンテンツを独自ドメインでSSL化してホスティングする方法を紹介します。

はじめに

今回はReactで作った静的コンテンツをAmazon S3でホスティングする方法を紹介します。それだけでは物足りないので、独自ドメイン対応、SSL化までやっていきます。それでは、始めましょう。

前提

この記事を楽しむには以下が必要です。

  • NodeJSがインストール済みであること
  • AWS CLIがインストール済みであること
  • ドメインを取得済みであること

静的サイトの作成

まずはホスティングする静的サイトを作ります。

準備

Reactでちゃちゃっとサンプルサイトを作ることにしましょう。

$ npm install -g create-react-app
$ create-react-app my-website
$ cd my-website/

静的サイトの作成

今回はReactアプリケーションを作ることが目的ではないので、App.jsの画面に表示される文字を変更するだけにします。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Hosting a React Welcom Page on S3</h1>
        </header>
        <p className="App-intro">
          Amazon S3 is easy stuff for hosting a static website.
        </p>
      </div>
    );
  }
}

export default App;

はい、完成です。

S3バケットの作成と静的サイトのデプロイ

次にS3バケットに作ったサンプルサイトをデプロイしましょう。

S3バケットの作成

S3バケットはAWSコンソールから作ってもよいのですが、AWS CLIから作ってみましょう。

$ aws s3 ls
$ aws s3 mb s3://mywebsite-hosting
make_bucket: mywebsite-hosting
$ aws s3 ls
2018-07-07 11:00:52 mywebsite-hosting

ビルドしてデプロイ

$ yarn build
$ ls
README.md     build/        node_modules/ package.json  public/       src/          yarn.lock
$ aws s3 sync build s3://mywebsite-hosting
$ aws s3 website s3://mywebsite-hosting --index-document index.html

AWSコンソールでS3バケットを確認してみましょう。

S3 2

作成したS3バケット上にビルドしたファイルが全てアップロードされています。

S3 0

作成したS3バケットがホスティングされています。

S3バケットのポリシー設定

S3バケットにアップロードしたファイルはデフォルトではアクセスが許可されていないので、誰でも見れるようにポリシーを変更します。

S3 1

今回は以下のポリシーを設定しました。S3のポリシーはジェネレーターサイトを使うことでGUIで作成できます。

{
    "Version": "2012-10-17",
    "Id": "Policy1530901313146",
    "Statement": [
        {
            "Sid": "Stmt1530901311070",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mywebsite-hosting/*"
        }
    ]
}

表示できるか確認します。AWSのS3のコンソールから、エンドポイントを確認します。

S3 3

エンドポイントをブラウザで開きます。

S3 4

サンプルサイトがホスティングされていることが確認できました。

独自ドメインの設定

次に、ホスティングしているサンプルサイトに独自ドメインを設定しましょう。

Route53に独自ドメインを登録する

AWSのRoute53のコンソールから、「Hosted zones -> Create Hosted Zone」を選択し、「Domain Name」に取得済みのドメイン名を入力し、「Create」をクリックします。

Route53 1

作成されたHosted zoneのNSレコードのValueをDNSに設定します。

Route53 2

DNSの例として、ムームードメインの場合は、以下のように設定し、「ネームサーバ設定変更」をクリックします。

Mumu 3

CloudFrontでエンドポイントとドメインを紐付ける

AWSのCloudFrontのコンソールから、「Create Distribution」をクリックします。

Cf 1

今回は静的サイトを扱うので、Webの「Get Started」をクリックします。

Cf 2

「Origin Domain Name」にS3バケットのエンドポイントのURL(今回の場合は「http://mywebsite-hosting.s3-website-us-east-1.amazonaws.com/」)を入力します。すると、自動的に「Origin ID」が設定されます。

Cf 3

ファイルを圧縮して配信したい場合は「Compress Objects Automatically」を「Yes」にします。

Cf 5

「Price Class」には配信するロケーションを指定します。日本も配信する場合は「Use All Edge Locations」を選択します。「Alternate Domain Names」にはドメイン名を入力します。

Cf 5

「Default Root Object」には「index.html」と入力します。そして、「Create Distribution」をクリックします。

Cf 6

「Status」が「Deployed」になればCloudFrontの設定は完了です。

Cf 7

Route53にCloudFrontを紐付ける

AWSのRoute53のコンソールから、「Create Record Set」をクリックします。今回はサブドメインを利用しないので、Nameは空にします。そして、「Alias」に「Yes」を選択し、「Alias Target」に先程作成したCloudFrontのDistributionの設定を選択します。「Create」をクリックします。

Route53 5

以下のようにAレコードが追加されました。

Route53 6

これで独自ドメインでサンプルサイトが表示できるようになりました。

無料でSSL化

それでは無料でSSLに対応しましょう。

AWS Certificate Manager(ACM)で無料のSSL証明書を発行する

AWSのCertificate Managerのコンソールから、「Request a certificate」をクリックします。

Acm 1

「Domain name」にドメイン名またはサブドメイン名を入力し、「Next」をクリックします。

Acm 2

「DNS validation」を選択し、「Review」をクリックします。

Acm 3

「Confirm and request」をクリックします。

Acm 4

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

Acm 5

このままだとStatusが「Pending validation」のままなので、「Create record in Route 53」からバリデーション用のレコードを追加します。

Acm 7

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

Acm 8

以下のようにSUCCESSが表示されたら、Route53に設定されていることを確認します。

Acm 9

以下のようにAWSのRoute53のコンソールにバリデーション用のCNAMEレコードが追加されていることが確認できます。

Route53 7

しばらく待つと、AWSのCertificate Managerのコンソールから、以下のように「Status」が「Issued」になり、SSL証明書の発行が完了します。

Acm 10

CloudFrontにSSL証明書を設定する

AWSのCloudFrontのコンソールから、対象のDistributionを選択します。

Cf 8

「General」を選択し、「Edit」をクリックします。

Cf 9

「SSL Certificate -> Custom SSL Certificate」を選択し、先程の発行したSSL証明書を選択します。「Yes, Edit」をクリックします。

Cf 10
Cf 11
Cf 12

以下のように「SSL Certificate」にSSL証明書が設定されていることを確認します。

Cf 13

これでSSL証明書の設定は完了です。

HTTPをHTTPSにリダイレクトするように設定する

SSL化されたのでHTTPSのみにしてもよいのですが、ユーザーがブラウザにHTTPでURLを入力する場合もありえるので、HTTPで入力された場合にHTTPSにリダイレクトするように設定します。

「Behaviors」を選択し、デフォルトのBehaviorを選択して「Edit」をクリックします。

Cf 21

「Viewer Protocol Policy」に「Redirect HTTP to HTTPS」を選択して、「Yes, Edit」をクリックします。

Cf 22
Cf 23

以下のように「Viewer Protocol Policy」が「Redirect HTTP to HTTPS」に変更されていることを確認します。

Cf 24

しばらくして「Status」が「Deployed」になれば、上記の設定変更の反映は完了です。

Cf 25

動作確認

最後にブラウザに独自ドメインのURLを入力してみましょう。

Hosting

SSLで正しく表示されました。

おまけ

CloudFrontのキャッシュ削除の方法

S3バケットを更新した後にコンテンツをすぐに反映させるにはCloudFrontのキャッシュを削除する必要があります。AWS CLIを使って以下のようにキャッシュを削除できます。

$ yarn build
$ aws s3 sync build s3://mywebsite-hosting
$ curl -I https://yourdomain.com/
...
x-cache: Hit from cloudfront
...
$ aws cloudfront list-distributions --output text --query 'DistributionList.Items[*].[Id]'
EKZEZML5DJ0UB
$ aws cloudfront get-distribution --output json --id EKZEZML5DJ0UB
$ aws cloudfront create-invalidation --distribution-id EKZEZML5DJ0UB --paths '/index.html'
$ aws cloudfront get-invalidation --distribution-id EKZEZML5DJ0UB --id IP17L4GZGHHAK --output text --query 'Invalidation.Status'
Completed
$ curl -I https://yourdomain.com/
...
x-cache: Miss from cloudfront
...

もちろんAWSのCloudFrontのコンソールからも同様の操作ができます。その場合は、「Create Invalidation」をクリックします。

Cf 31

そして、削除したい「Object Paths」を入力して、「Invalidate」をクリックします。

Cf 32

これでキャッシュクリアも完了です。

コンテンツを配信するドメインを指定する方法

画像や動画などのリンクは他のWebサイトに貼られても表示されてしまいます。それを防ぎたい場合は以下のようにS3バケットのポリシーにコンディションを指定することで、表示するドメインを限定できます。

{
    "Version": "2012-10-17",
    "Id": "Policy1530901313146",
    "Statement": [
        {
            "Sid": "Stmt1530901311070",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mywebsite-hosting/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "http://yourdomain.com/*"
                }
            }
        }
    ]
}

S3とCloudFrontのCORSの対応方法

CORS(Cross-Origin Resource Sharing)はオリジンサーバ以外からデータを取得する仕組みですが、S3とCloudFrontの両方を利用している場合は両方共対応する必要があります。

S3のCORS対応

対象のS3バケットを選び、「Permissions -> CORS configuration」から、以下のようにXMLを設定し、「Save」すればOKです。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

S3 cors

CloudFrontのCORS対応

対象のDistributionを選んで、「Behaviors」タブからデフォルトのBehaviorを選んで「Edit」します。

Cf cors 1

「Cache Based on Selected」から「Whitelist」を選択します。

Cf cors 2

「Whitelist Headers」に「Origin」を選択して「Add >>」します。

Cf cors 3

後は保存して、変更が反映されれば完了です。

AWSコンソールを英語表記にする方法

この記事ではAWSコンソールは英語表記になっています。デフォルトでは日本語表記になっていると思うので、AWSコンソールのフッターから、「English (US)」を選択すれば英語表記にできます。

Aws footer

英語表記にするメリットは、日本語表記にした場合にAWSのUI変更についていくのが大変なのでそれを回避できる点と、何か問題があった時にググることを簡単にする点です。なので、よほど英語アレルギーがある人以外は英語表記にすることをおすすめします。

最後に

いかがでしたか?これでS3上に静的コンテンツを独自ドメインで公開できるようになったと思います。サーバーサイドを作らないのであれば、この方法で十分ですね。それでは。

環境

  • NodeJS: v10.5.0
  • create-react-app: 1.5.2
  • AWS CLI: aws-cli/1.15.40 Python/3.6.5 Darwin/17.6.0 botocore/1.10.40

カテゴリ : 技術 Tips & Tutorials タグ : acm, aws, cloudfront, route53, s3

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

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.」というエラーが出た場合の原因と対処法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • [tips][bat] バッチで明日の日付を計算する。
    [tips][bat] バッチで明日の日付を計算する。
  • PythonのためのVisual Studio Codeの設定方法
    PythonのためのVisual Studio Codeの設定方法

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