From 4d19928964f675292e56b0ab15a04a7fb48fae37 Mon Sep 17 00:00:00 2001 From: Nikhil Swaminathan Date: Mon, 11 Mar 2019 09:39:28 -0700 Subject: [PATCH] Add Hosting option with AWS Amplify Console (#514) * Added Amplify Console hosting option * Hosting updates with Amplify Console * hosting style fix * fixing broken links * Moving the Console --- cli/hosting.md | 26 ++++++++++++++++++++++---- images/.DS_Store | Bin 8196 -> 0 bytes 2 files changed, 22 insertions(+), 4 deletions(-) delete mode 100644 images/.DS_Store diff --git a/cli/hosting.md b/cli/hosting.md index 4f2cb416b7f..68709579f98 100644 --- a/cli/hosting.md +++ b/cli/hosting.md @@ -2,6 +2,15 @@ --- # Hosting + +There are multiple ways to deploy and host your Amplify app. Two options are listed below: + + +Amplify CLI
+AWS Amplify Console + +## Using the Amplify CLI + The `amplify publish` command is designed to build and publish both the backend and the front end of the project. Depending on the stage that the project is at, the command can be configured to publish either to a DEV or a PROD environment.
In the current implementation, the frontend publish is only available for JavaScript project for static web hosting. This is accomplished by the category plugin amplify-category-hosting, using Amazon S3 and Amazon CloudFront.
The amplify-category-hosting module uses the amplify-provider-awscloudformation to create and update the S3 and CloudFront resources. @@ -9,7 +18,7 @@ For more information of the Amazon S3 and Amazon CloudFront, check their docs:< [S3 static web hosting](https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html)
[CloudFront DEV Guide](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) -## Workflow +### Workflow - `amplify hosting add`
This adds the hosting resources to the backend. The command will first prompt for environment selection, either DEV or PROD. Upon completion, the CloudFormation template for the resources is placed in the amplify/backend/hosting directory.

- `amplify hosting configure`
@@ -19,7 +28,7 @@ This command first builds and pushes the update of backend resources to the clou For the amplify-category-hosting implementation, the frontend build artifacts will be uploaded to the S3 hosting bucket, and then if the CloudFront is used and the command is executed with the `--invalidateCloudFront` or `-c` flag, an invalidation request will be sent to the CloudFront to invalidate its cache. -## Configuration +### Configuration The command `amplify hosting configure` walks through the steps to configure the different sections of the resources used in hosting. - `Website`
Configures the S3 bucket for static web hosting, the user can set the index doc and error doc, both are set to be `index.html` by default.

@@ -28,7 +37,7 @@ Configures the CloudFront content delivery network (CDN), the user can configure - `Publish`
Configures the publish ignore patterns (just like what's in the .gitignore) for the publish command, the publish command will ignore directories and files in the distribution folder that have names matching the patterns. -## Stages +### Stages For the amplify-category-hosting implementation, there are two stages you can select from: - DEV: only S3 static web hosting - PROD: S3 and CloudFront @@ -36,4 +45,13 @@ For the amplify-category-hosting implementation, there are two stages you can se It can take time to create and replicate a CloudFront Distribution across the global CDN footprint, in some cases 15 minutes or more. Therefore the Amplify CLI provides a DEV configuration with an S3 static site only when prototyping your application; and a PROD configuration when you are ready to deploy in production. Note that the DEV stage using S3 static sites does not have full HTTPS end to end so it is only recommended for prototyping your app.
You will be prompted to select a stage when you add hosting.
CloudFront can also be added or removed in your project afterwards by the `amplify hosting configure` command.
-Note that if the hosting S3 bucket is newly created in regions other than us-east-1, you might get the `HTTP 307 Temporary Redirect` error in the beginning when you access your published application through CloudFront. This is because CloudFront forwards requests to the default S3 endpoint (s3.amazonaws.com), which is in the us-east-1 region, and it can take up to 24 hours for the new hosting bucket name to propagate globally. +Note that if the hosting S3 bucket is newly created in regions other than us-east-1, you might get the `HTTP 307 Temporary Redirect` error in the beginning when you access your published application through CloudFront. This is because CloudFront forwards requests to the default S3 endpoint (s3.amazonaws.com), which is in the us-east-1 region, and it can take up to 24 hours for the new hosting bucket name to propagate globally. + + +## Using the AWS Amplify Console + +The AWS Amplify Console is a continuous deployment and hosting service for Amplify web apps. [Learn more](http://console.amplify.aws){: .target='new'}. +{: .callout .callout--action} + +The AWS Amplify Console provides a Git-based workflow for building, deploying, and hosting your Amplify web app — both the frontend and backend — from source control. Once you connect a feature branch, all code commits are automatically deployed to an `amplifyapp.com` subdomain or your custom domain. **[Get started >>](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html)** + diff --git a/images/.DS_Store b/images/.DS_Store deleted file mode 100644 index d48c122abc7efae36944b920fa18c323ac684e5b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8196 zcmeHMUu+ab7@yzK!fw0JZLQE2H+QvE5KCzJR}qoxKjcqI8?L1-AjjVA3ai`Qa=Uj0 zN=Y@*Xbe%`5RCfZi>ZHJ6!cMjG3bMlOAI7xqQ2;Zn&1nGF@7_<*R+(r5ktaGGV`06 zZ@zD4zWvSYeS3^CbmomV#_AYj5@n8RB^9?xT+Z{n6bpOG2toRcd6{usf5|lY6L!1gwTpd)15P*<} z03uPH;sBwO2r(JrRDeR2YzEN-LREwz1_E`GC-`u}WQbD%2I>rfIzu=!!UzRocG63T z;S9+DqcZY9(q0Hc&lIck7vUAfa}^bbv<*yGRME<27 z6LwO8K$2uhPOJ436K#)fY)Q0j-neUHw`}v`+&$V}p)2@C5i6GVc)heoxuQ~8s_og^yHDv$t2G5$e&3jHxsG?h z%z1=qwaTL{@6NhTf6nCcp{#4?M;$M%R%dlPo40k}?6B>Wb=su9DleOJZM)y~EN*6G z*f&r5TsBWMe9&`qewQ$oR@J;`?l;MnRWQ5BqBm^Olw47TJiTm1eASwD8`>XF_7tns z>Kdh1Sw2*-JS$_HgX5OrA0N@Ztmzn*bL=2_)$y&TEi)%qqeUKY^ii`|Q&-=x@&Qe| zb#%$fa6V(5$Xos?wMmkSHEMNLqES;08?=;tuEDJt>L-#cB+ZSQc8E*5awe4qDTqa_ z)mmg#mj*mqbz39<4DO)7fkOyr&W70@Qrc-g0<=6x}$Ii29_A$G}F0(J$H>}96vtQYt>@RkM{mpJ7 z1_?E2Kogqr5LTlV+pz;lbYKq-U*I$FW^PIgqQIu&f^VS#G7~* zAK*iLgirA~zQuRAiXwi%kN63{;dk7?Ke6&yMJ)Wa9xJiEzqE}2W3_~{PBgJS{2~{- zczd?TcRsmmx3c%{W&5>doK5%D-oJcBqIvE5OV}3BHy1Bp&x1 zA{T?Rpu`7>mgdQYj)b~|A0Mf>vc91%{$PBSL~K*T=IZ#v5}gM%CTu;@5?9nkM15H_ zTicYlT23sNM04{NMN!M>7zEPCwvlu(5k8Ra&`8Qi#-~wM$17#&PLcNtyUKoMe-LeN zvVXA{m8e4_5q2HgiLf2$Mh|wP5B=DW6b5kw>5#gkaB%`TqVE};#T1^y^LPd4h`g`i zbzC6wzJ<5(4&K8w-X|Jg!eyfIXZQkN6N#_kdPvR^X?y3A7Qf6TZ6TF&Y}YwPy(Nvg z3Q_A0cwkXrqmJJwJqv&TzXLNxCL#|+9=KaQfU@pXcPFiGp}UsH+6l@>Df7g~O$8`a rs1V^ep$NwbXZ|pxdV+>>on(kp0a6d8|NTRN6TSbV_rIXtJze|