エックスサーバーで借りたドメインのサブドメイン使用し、Vercelにカスタムドメインを設定する

過去にドメイン関係のトラブルに見舞われたことがある。 ドメイン関係のトラブルはクリティカルなので非常にそわそわする。 そんな時エックスサーバーのサポートが手厚く、以来、レンタルサーバー・ドメインはエックスサーバーにお世話になっている。 そのため、今回新たに作成したWebサービスもエックスドメインで借りたドメインのサブドメインに紐づけることにした。 サーバーはVercelに浮気した。 エックスサーバーでサブドメインを作成する 前述したとおり、エックスサーバーは非常にサポートが充実している。 なので、サブドメインの作成を改めてここに書く必要なんてない。 公式が最も正しく、詳しい。 サブドメイン設定を参考にサブドメインを作成する。 Vercelに紐づける 大前提としてVercelにプロジェクトが既にあるという体で進めていく。 Vercel管理画面 SettingsタブをクリックしProject Settingsページに遷移する。 サイドナビのDomainsをクリックし、inputに作成したサブドメインを入力しAddボタンをクリックする。 https://は不要なので注意。 Invalid Configurationという警告がでるが、Vercelに認識はしてもらった。 エックスサーバー管理画面 DNSレコード設定をクリックしDNSレコード一覧から対象ドメインを選択し変更ボタンをクリックする。 ここでDNSレコードが設定できるので、下記のように設定する。 項目 値 ホスト名 [サブドメイン名] 種別 CNAME 内容 cname.vercel-dns.com 優先度 上記設定を追加し、しばらく待つ。 Vercelサービスに割り当てられるドメイン サービスを作成すると独自に、割り当てられるドメインがある。 service-name.vercel.app のようなやつ。 独自ドメインを設定した暁には、このドメインをリダイレクトするのがいいと思われる。 先ほど設定したドメインの下にこのドメインがあると思うので、Editボタンをクリックすると、Redirect toというセレクトボックスがある。 そこに先ほど設定したドメインが表示されると思うので、選択し、Saveすればリダイレクトが完了する。 もしこの設定を行わないとGoogleのクローラーはどのように判断するのだろうか。 コピーサイトと間違われることもありそうなので、リダイレクトはしたほうがいい。 ただサブドメインを使用する場合は、友人に共有したいけどメインドメインがばれるのが嫌という人も多いだろう。 その場合はシェア用に取っておくのも有りかもしれない。 Vercel管理画面にて、Valid Configuration・Assigned to main 5分くらいでValid Configurationが上記のような表記に変更された。 実際に設定したドメインを訪れると作成したサービスにアクセスすることができた。 キャッシュを消さないと見れないかもしれないので注意が必要。

投稿日 · 2023-07-21 · 更新日 · 2024-06-07 · 1 分 · nove-b

エックスサーバーで作ったサブドメインをGoogle Hostingに適用する

エックスサーバーは非常に便利で50個のサブドメインを作成することができる。 これは私みたいに飽き性でいろいろなものを作っては放置するタイプには非常に重宝する機能である。 エックスサーバーが気になるのであれば下記リンクをどうぞ。 [sc name=“exserver_all_unlimited” ][/sc] さてそしてまた、この機能を使用する機会がきた。 今回はエックスサーバーのサブドメインをGoogle Hostingに適用するというケースを行ったので、備忘録としてここに書いておく。 サブドメインの取得の仕方は省力する。 が、反映になかなか時間がかかるのが、エックスサーバーの玉に瑕。 firebase Consoleに行く Firebase console 作成したドメインを入力する まずはfirebase ConsoleのHostingに移動し、カスタムドメインを追加ボタンをクリックする。 するとドメイン名の入力を求められるので、エックスサーバーで作成したサブドメインを記入する。 ※「angular.nove-web.com を既存のウェブサイトにリダイレクトする」をチェック。 リダイレクト先にはエックスサーバーで作成したサブドメインを記入する。 次へをクリック。 所有権の確認 エックスサーバーのDNSレコード設定に進み、対象ドメインを選択する。 次に「DNSレコード追加」タブに移動する。 記入欄が現れるので、下記のように記入していく。 ホスト名:作成したドメイン 種別:TXTを選択 内容:Firebaseコンソール画面でコピーしたTXTレコードの値 追加が完了したら、firebase Consoleに戻り、所有権を証明ボタンをクリックする。 ここで失敗した。 ドメイン ********.com の所有権を証明できませんでした。設定をお確かめいただき、もう一度お試しください。 とのエラーが表示された。 解決方法がわからずに、途方に暮れていたので、初心に戻りGoogle Workspace 管理者ヘルプに行くと、 最初に試すことに48 時間待機すると書かれていたので、待機することにした。 ちなみに下記サイトでDNSレコードがしっかり適用されているか確認することができる。 Google Admin Toolbox Dig 全然うまくいかずに、色々DNSレコードをいじっていたら、途端に通った。 何をしたか、わからない。 実行(ドメインとの紐づけ) 何をしたかはわかないが、うまくいったようで、セットアップ画面が表示された。 またレコードを追加する必要がある。 下記のように追加すれば問題ない。 ホスト名:作成したドメイン 種別:Firebaseコンソール画面で表示されたレコードタイプ(私の場合はA) 内容:Firebaseコンソール画面でコピーしたTXTレコードの値 追加が完了した後に、終了ボタンをクリックする。 この時点でカスタムドメインの追加はうまくいったが、ステータスが設定が必要ですと表示されている。 最後に 設定を完了するために、最後にもうひとつ。 サブドメインの場合は、すでにあるDNSレコードと干渉する場合がある。 本サイトでは「*.nove-web.com」のようなレコードが既に存在していた。 これは見ての通り、すべてのサブドメインを対象にしているので、削除する必要がある。 ただ、本サイトのように新規で追加する以外にサブドメインを使っている場合は、そのサブドメインのレコードを新規に作成する必要がある。 後は接続が完了するまで待つ、ひたすら待ちましょう。 公開ができればそのサイトにアクセスができる。 今回追加したのは下記サイト。 https://angular.nove-web.com/home コスパ最強のWeb アプリ 今回はfirebase hosting で公開したのはAngularを勉強のために立ち上げたブログサイト。...

投稿日 · 2022-05-03 · 更新日 · 2024-06-07 · 1 分 · nove-b

アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した

アドセンスに申し込む 記事も10記事たまったので、いったんダメ元でアドセンスに申し込もうと思い立った。 過去に1年間続いたブログではそれなりにアドセンスからの収入があった。 当時は本の感想ブログで、本なんて売れないし、アフェリエイトよりも効率良くアドセンスは収入があったので、なんとしても入れたい。 サブドメインが使用できません で、よし、いざ、と腰を上げると、なんとサブドメインが使用できないとのこと。 本サイトは何を隠そうサブドメインなので、腰を上げた瞬間に座り込んだ。 ブログはサブドメインと言った自分の計画性のなさにうんざりする。 が、なんとしてもアドセンスやりたい。 そこで実現のために2つの方法を考えた。 アドセンスをサブドメインで申請する2つの方法 ルートドメインで新規構築 1つはルートドメインでサイトを構築する。 現状はロゴが真ん中にあるだけのサイトになっている。 アドセンスの審査は厳しいので、それだと落ちるに違いない。 落ちないようにするために、それなりのサイトを作成する必要がある。 当然、自身の労力もかかれば、時間もかかるので、この方法は現実的じゃない。 301リダイレクト 2つ目はルートドメインからサブドメインに301リダイレクトをする方法。 301リダイレクトとは「サーバー側の永続的なリダイレクト」のことで、Google曰く、 検索エンジンの結果に表示されるページの URL を変更する必要がある場合は、可能な限りサーバー側の永続的なリダイレクトを使用することをおすすめします。これは、Google 検索とユーザーを確実に正しいページに導くための最善の方法です。ステータス コード 301 と 308 は、ページが別の場所に完全に移転したことを意味します。 とのこと。 つまり、Googleはリダイレクト先を見てくれるようになる。 これの方が簡単かつシンプルなので、こちらの方法を採用することにした。 301リダイレクトを使用しサブドメインでアドセンス申請 301リダイレクトは .htaccess をいじる必要がある。 でも本ブログで使用しているエックスサーバーでなら管理画面で簡単にできるので、そちらを使用することにした。 リダイレクトが繰り返し行われました 作業は簡単でサーバーパネル > サイト転送設定 > ドメインを選択 > リダイレクト設定追加 > リダイレクト先を追加するだけなのだが、実行すると、 ********でリダイレクトが繰り返し行われました。 というエラーがでた。 なぜ、という思いで調べてみるとサイト転送設定(リダイレクト設定) | レンタルサーバーならエックスサーバーに答えが書かれていた。 指定のURLへリダイレクト設定が可能です。 ※サブドメインを含む、同一ドメインのURLにはリダイレクト設定はできません。 同一ドメイン内でリダイレクト設定を行う場合は、.htaccessファイルで設定してください。 なるほど、エックスサーバーは本当に親切でありがたい。 どうせなら設定できるようにしてくれるともっとありがたいのだが、現状で相当親切にしてもらているのでそんなことは言えません。 とても親切なので、広告リンクを貼ってあげる。 [sc name=“exserver_all_unlimited” ][/sc] .htaccessをエックスサーバーの管理画面で編集する 話を元に戻して――、ということで .htaccessをいじることに。 ただこれもFTPとか使うことなくエックスサーバーなら簡単にできる。 サーバーパネル > .htaccess編集 > ドメインを選択 > ....

投稿日 · 2021-12-05 · 更新日 · 2024-06-07 · 1 分 · nove-b

GithubActionを使用してエックスサーバーにデプロイする

FTPでファイルをアップロードするのが面倒くさい 今まで多くの人がそうであるように、 サイト作成 Githubに最新バージョンをプッシュ FileZillaをしようしてサーバーにデプロイ 修正 Githubに最新バージョンをプッシュ FileZillaをしようしてサーバーにデプロイ というフローを踏んでサイトを運用してきた。 が、これが面倒でしかたない。 どうせGithubにあげたものをデプロイするのであれば、プッシュと同時にデプロイができればいいのに…! レンタルサーバーでもできるのか? Firebase Hosting、Netlify …、などを使えばできることは知っている。 しかしレンタルサーバーでもできるのか? 正直レンタルサーバーは上記サーバーに比べて劣るイメージがある。 エックスサーバーで簡単にできた まずはエックスサーバー万歳三唱🙌🙌🙌 本サイトはエックスサーバーを作っているのだが、エックスサーバーならGithub Action と連携できることを知った。 これで今までのフローとストレスと労力が半減された。 さらには常に最新バージョンがデプロイされるという先祖返りの危機もなくなった。 最後にエックスサーバー万歳三唱🙌🙌🙌 [sc name=“exserver_all_unlimited” ][/sc] どうやって実現するのか すごく簡単なので、特に考えすぎずに実行してほしい。 エックスサーバー側の設定 特にないけれど、エックスサーバーのサーバーパネルで ftpサーバのホスト ftpサーバのアカウント名 ftpサーバのパスワード を確認してメモをしておく。 参考:FTPソフトの設定 | レンタルサーバーならエックスサーバー Github側の設定 対象リポジトリのSettings > Secrets に下記情報を入力する。 FTP_PASSWORD → ftpサーバのホスト FTP_SERVER → ftpサーバのアカウント名 FTP_USERNAME → ftpサーバのパスワード deploy.ymlの作成 対象リポジトリ直下に.github/workflows/ディレクトリを作成し、その下にdeploy.ymlファイルを設置する。 そこに下記情報を入力すれば完了。 on: push: branches: - main name: Deploy jobs: FTP-Deploy-Action: name: FTP-Deploy-Action runs-on: ubuntu-latest steps: - uses: actions/checkout@main - name: FTP-Deploy-Action uses: SamKirkland/FTP-Deploy-Action@2....

投稿日 · 2021-11-28 · 更新日 · 2024-06-07 · 1 分 · nove-b