カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-1

AWSでポートフォリオサイトのデプロイ作業を自動化してみよう

AWSでポートフォリオサイトのデプロイ作業を自動化してみよう

本記事では、自分のポートフォリオサイトの自動デプロイ環境の作り方について解説します。その中で、CI/CDとはどのようなものか、どのようなメリットがあるのか、についても解説しますので、文章だけでなく実際に手を動かしながら、CI/CDのメリットについて理解いただけると思います。

また、ドメインの取得もオプション項目として用意しております。自分のサイトを公開する際に、自分が設定する独自のドメインを利用することで、サイトの信頼性が上がります。企業のサイトはほぼ100%独自ドメインを保有しております。自分のサービスをインターネット上に公開する際は、参考にしていただければ幸いです。

対象開発OS: Mac
対象開発シェル:bash(動作確認はbashで実施しておりますが、zshでも動作するかと思います)

最終的なアーキテクチャは下記のようになります。

Image from Gyazo

注意事項

記事内のスクリーンショットは、執筆時点(2019年10月)のものとなります。実際に作業される際の画面と、スクリーンショットの内容が異なる可能性がありますが、ご理解いただけますと幸いです。

また、本記事の内容に関して発生した損害に関して、執筆者と運営団体は一切の責任を持ちませんので、ご理解ください。

学習内容

  • ドメイン名の取得、Amazon Route 53におけるDNSの設定方法について学びます。
  • Vue.jsの新規プロジェクトの作成方法を学びます。
  • S3のWebサイトホスティング機能を使った、手動デプロイ方法について学びます。
  • AWS Amplify Consoleにおける、自動デプロイ環境の構築方法について学びます。

受講における必要条件

  • Githubのアカウントを保有
  • Gitに関しての基礎知識
  • AWSについての基礎知識
  • Macのターミナルを操作するための基礎知識
  • クレジットカードを保有していること

AWSのアカウント取得、ドメイン取得時にはクレジットカードが必要となります。Webサービスにクレジットカードを登録する際は、パスワードの管理には厳重にご注意ください。

この教材の対象者

  • プログラミングを始めて、実際に自分の作成したものを公開してみたい方
  • CI/CDという単語は知っているが、実際に実装したことがない方
  • AWSのアカウントを作成して、実際にサービスを使用して何かを作ってみたい方

学ばないこと

  • Gitの操作方法
  • Macのターミナルの操作方法
  • Vue.jsの詳細な解説
  • 各種アカウントの作成方法(AWS・Github・お名前.com)

AWSのアカウントの作成方法、マネジメントコンソールの操作方法については、必要最低限の情報のみを記載しております。ご不明な点は、別途別記事等で調査いただければ幸いです。

本教材の対応バージョン

  • Vue.js2系
  • Vuetify2系

最終的なコードのサンプル

最終的なコードのサンプルはこちらです。

portfolio-deploy-automation

もし実装に関して不明な点などが発生しましたら、適宜参照いただければ幸いです。

目次

0章 はじめに

本教材を進める上での環境を整えたり、概要の説明を行います。

1章 Vue.jsでポートフォリオサイトを作ってみよう

Vue.jsの新規アプリケーションを作成し、ローカル環境でページを表示できるようにします。

2章 ドメインを取得してみよう(オプション)

お名前.comから独自ドメインを取得し、Amazon Route 53の設定を行います。

3章 AWS Amplify Consoleを使ってCI/CD環境を構築しよう

実際にCI/CDの環境を作成し、自分のポートフォリオサイトを自動でデプロイする環境を作成します。

4章 後片付け

今回の記事で作成したAWSの各種サービスを削除を行います。