I've been experimenting with various settings for Amazon CloudFront publishing 🎉
Advance Preparation
- Upload the set of files you want to publish to Amazon S3 in advance.
- You can leave the settings private.
Publishing in combination with Amazon S3
This is a method of publishing using a combination of Amazon CloudFront and Amazon S3.
AWS Console → Click "CloudFront."
Click "Create CloudFront Distribution."
Specify the domain of the target S3, specify the S3 bucket access, set the policy to auto-update, and set the settings to redirect to HTTPS. Set the root object to index.html in S3. Leave the rest of the settings as default.
After creation, check the S3 bucket to confirm that the policy has been set automatically.
Try accessing the URL of the CloudFront distribution for S3 that was created.
S3 is accessed via CloudFront, and the WebSite is displayed.
Publishing only the specified IP
This is a method for publishing only the specified IP in Amazon CloudFront.
As preliminary preparation, display the WebSite in S3 via CloudFront.
Click "Function" → Click "Create Function."
Set the function name and description → Click "Create Function."
Configure the function to restrict IP in CloudFront Functions.
function handler(event) {
var request = event.request;
var clientIP = event.viewer.ip;
// Specify the IP you want to allow
var allowIP = 'IP to allow';
if (clientIP === allowIP) {
return request;
} else {
var response = {
statusCode: 403,
statusDescription: 'Forbidden',
}
return response;
}
}
Publish → Click "Publish Function."
After creating the function, the Association menu will appear, so click "Add Association."
Set the target distribution, event type, and cache behavior. → Click "Add Association."
Check if the association has been made.
If you access the URL from the IP you set, the WebSite will be displayed. WebSite will not be displayed except for the specified IP.
Basic Authentication Publication
This is a method of publishing using Basic Authentication with Amazon CloudFront.
As preliminary preparation, display the WebSite in S3 via CloudFront.
Click "Function" → Click "Create Function."
Set the function name and description. → Click "Create Function."
Configure the function for Basic authentication in CloudFront Functions.
function handler(event) {
var request = event.request;
var headers = request.headers;
// Set user and password
var user = 'set user';
var pass = 'set password';
var authValue = 'Basic ' + (user + ':' + pass).toString('base64');
if (typeof headers.authorization === 'undefined' || headers.authorization.value !== authValue) {
var response = {
statusCode: 401,
statusDescription: 'Unauthorized',
headers: {'www-authenticate': {value:'Basic'}}
};
return response;
} else {
return request;
}
}
Publish → Click "Publish Function."
After creating the function, the Association menu will appear, so click "Add Association."
Set the target distribution, event type, and cache behavior. → Click "Add Association."
Confirm that the association has been made.
When you access the URL, a dialog for entering the user and password will appear.
When enter the configured user and password, the WebSite will be displayed.
Vue.js Routing Support (extra)
This is how to support Vue.js routing with Amazon CloudFront.
This is a solution for displaying the routing page correctly when deploying an application built with Vue.js.
To prepare in advance, display the WebSite in S3 via CloudFront.
Click "Error Page" → Click "Create Custom Error Response."
Configure with error code 403 and other capture contents → Click "Create Custom Error Response."
Configure with error code 404 and other contents of the capture → Click "Create Custom Error Response."
Confirm the settings.
The routing page will now be displayed.
By using Amazon CloudFront, it is possible to publish in combination with Amazon S3 and to perform IP restrictions and Basic authentication in conjunction with CloudFront Functions 💡
In my next article, I would like to introduce the way combined with AWS WAF.
Related Articles
Top comments (0)