静态网站的成本非常低，具有较高的可靠性，几乎不需要IT管理，并且能够扩展，可以向网站访客提供HTML、JavaScript、图像、视频和其他文件，最大的优势就是能够在无需额外操作的情况下处理企业级流量。本教程将介绍如何使用AWS Amplify部署静态网站。
亚马逊云科技AWS官网：点击直达（注册立享200+免费云服务）
AWS Amplify是亚马逊云科技推出的基于Git的CI/CD工作流程，按使用量付费，主要主要用于构建、部署和托管网站。支持React、Angular、Vue等现代Web框架，并为Next.js和Nuxt应用程序提供零配置部署。
AWS Amplify可提供完全托管的静态网站和Web应用程托管。Amplify的托管解决方案利用Amazon CloudFront和AWS S3通过AWS内容分发网络 (CDN) 交付您的站点资产。另外Amplify提供了基于Git的连续部署工作流，允许您在每次提交代码时自动将更新部署到站点。
AWS Amplify工作流程如下：
一、前提条件
1、已拥有一个亚马逊云科技AWS账户。如未注册参考：
2、AWS配置文件已配置为本地开发。
3、环境中已安装Nodejs和npm。
4、熟悉git并拥有Github账户。
二、创建新的React应用程序
1、在新的终端窗口或命令行中，运行以下命令以使用Vite创建React应用程序：
npm create vite@latest staticwebsite — –template react
cd staticwebsite
npm install
npm run dev
2、在终端窗口中选择并打开本地链接以查看Vite+React应用程序。
npm create vite@latest staticwebsite — –template react
cd staticwebsite
npm install
npm run dev
三、初始化GitHub代码库
在此步骤中将创建一个GitHub代码库并将代码提交到该代码库，不过需要GitHub账户来完成此步骤，如果没有账户请注册一个。
1、登录GitHub。
2、在启动新存储库中，进行以下选择：
在存储库名称中，输入staticwebsite，并选择公开单选按钮，然后选择创建新存储库。
3、打开新的终端窗口，导航到项目根文件夹（staticwebsite），然后运行以下命令来初始化git并将应用程序推送到新的GitHub存储库：
注意：将命令中的SSH GitHub URL替换为你的SSH GitHub URL。
git init
git add .
git commit -m “first commit”
git remote add origin git@github.com:<your-username>/staticwebsite.git
git branch -M main
git push -u origin main
四、通过AWS Amplify部署应用程序
将把刚刚创建的GitHub存储库连接到AWS Amplify，以便在AWS上构建、部署和托管应用程序。
1、在新的浏览器窗口中登录AWS管理控制台，然后通过以下网址打开AWS Amplify控制台。
2、选择创建新的应用程序。
3、在使用Amplify开始构建页面上的部署应用程序中，选择GitHub，然后选择下一步。
注意：
- 如果使用的是现有存储库，请连接GitHub、Bitbucket、GitLab或AWS CodeCommit存储库；
- 还可以选择手动上传构建构件，而无需连接Git存储库；
- 在授权Amplify控制台后，AWS Amplify会通过存储库提供商获取访问令牌，但不会将令牌存储在AWS服务器上。Amplify仅使用安装在特定存储库中的部署密钥来访问您的存储库。
4、出现提示时，请使用GitHub进行身份验证。您将被自动重定向回AWS Amplify控制台。选择您之前创建的存储库和主分支。然后，选择下一步。
5、保留默认的构建设置并选择下一步。Amplify会检查您的存储库，以自动检测要调用的构建命令的顺序。
6、查看所选输入，然后选择保存并部署，将您的Web应用程序部署到全球内容分发网络（CDN）。
现在AWS Amplify将在https://…amplifyapp.com上构建您的源代码并部署应用程序，每次git推送都会更新您的部署实例。根据应用程序的大小，部署可能需要2-5分钟。
7、构建完成后选择访问已部署的URL，即可查看您的Web应用程序的实时运行情况。
五、清理资源
完成后建议删除在本教程中创建的应用程序和后端资源，以免产生额外费用。
1、在AWS Amplify控制台中，在staticwebsite应用程序的左侧导航栏中，选择应用程序设置，然后选择常规设置。
2、在“常规设置”中，选择删除应用程序。
相关推荐：
-
广告合作
-
QQ群号：4114653
