Simple interface with signin and signup on AWS Cognito, cognito profile attributes editing, profile avatar upload to S3, basic logs to DynamoDB and manager EC2 instances to Start Stop and security group.
Uses aws-sdk, aws-amplify, Vuejs, veux, vue-router, element-ui and build with vue-cli 3
This app was created to be used as initial basis for other projects.
- Signup and Signin in AWS Cognito services
- Has profile form to update user information and upload profile image
- After login, list all EC2 Instances and test if the security group of each instance allow only the same public ip address you are at the moment loads the page for RDP connections
- Power on and off instances
- Log actions to DynamoDB
- Prepared for public and protected routes with vue-router and amplify auth
- Mini messages/alert component based on vuex and element-ui
- Responsive header menu, using element-ui (non-existent in element-ui components)
Be careful to put on production without customization, allow free signup will allow anyone in internet to turn on or off your instances.
Before, read why i prefer not use awsmobile cli here
Basic and easy way to deploy your files do AWS and configure S3, Cognito, Cloud Front and PinPoint environment.
# Clone project
git clone https://github.com/abelmferreira/vuejs-elementui-aws
# install dependencies
npm install
# enable and configure aws hosting (s3 + cloud front) and analytics (pinpoint)
npm install -g awsmobile
# configure awsmobile creating super user, see how in references links
awsmobile configure
# init a new project
awsmobile init
awsmobile user-files enable
# enable and configure aws cognito
awsmobile user-signin enable --prompt
? Sign-in is currently disabled, what do you want to do next #Go to advanced settings
? Which sign-in method you want to configure #Cognito UserPools
? How are users going to login #Email, Username
? Password minimum length (number of characters) #8
? Password character requirements #uppercase, lowercase, numbers
# apply new configurations
npm run push-aws
# serve at localhost:8080
npm run dev
$ deploy to AWS
npm run deployTo allow EC2 functions access https://console.aws.amazon.com/iam and create a new custom policie with json below, change ARN to your account ID and region.
Then find the role created by awsmobile cli, it will have your project name plus _auth and attach you new policie.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": [
"ec2:StartInstances",
"ec2:StopInstances"
],
"Resource": "arn:aws:ec2:<INSTANCES_REGION OR *>:<YOU_ACCOUNT_ID OR *>:instance/*"
},
{
"Sid": "VisualEditor1",
"Effect": "Allow",
"Action": [
"ec2:DescribeInstances",
"ec2:DescribeSecurityGroups",
"ec2:DescribeInstanceStatus"
],
"Resource": "*"
},
{
"Sid": "VisualEditor2",
"Effect": "Allow",
"Action": [
"ec2:RevokeSecurityGroupIngress",
"ec2:AuthorizeSecurityGroupIngress",
"ec2:UpdateSecurityGroupRuleDescriptionsIngress"
],
"Resource": "arn:aws:ec2:<INSTANCES_REGION OR *>:<YOU_ACCOUNT_ID OR *>:security-group/*"
}
]
}Then add to aws-exports.js
const awsmobile = {
...
'aws_ec2_region': 'YOUR REGION'
...
}# enable databese with awsmobile cli
awsmobile database enable --prompt
Welcome to NoSQL database wizard
You will be asked a series of questions to help determine how to best construct your NoSQL database table.
? Should the data of this table be open or restricted by user? #Restricted
Note: This will create a column called "userId"
? Table name #logs
You can now add columns to the table.
? Would you like to add another column #Yes
? What would you like to name this column #created_at_ts
? Choose the data type #number
? Would you like to add another column #Yes
? What would you like to name this column #username
? Choose the data type #string
? Would you like to add another column #Yes
? What would you like to name this column #action
? Choose the data type #string
? Would you like to add another column #No
We automatically selected the userId column as the primary key because you chose the table to be restricted. You can optionally choose to add a sort key.
? Select sort key #created_at_ts
? Add index #Yes
# apply new configurations and deploy
npm run deployAfter each npm run deploy the awsmobile cli prints the urls
Successful!
your application is published and hosted at:
http://yourproject.s3-website.region.amazonaws.com
your application is also distributed through aws CloudFront
https://cloudfrontcode.cloudfront.net
please note that CloudFront content may not have been refreshed yetAwsmobile cli is realy is a great tool to easy and fast configure aws environment. But sometimes I prefer configure it manually beacause I cant set region, awsmobile uses us-west-1 by default, and use Cloud Front is not optional, small projects dont need cdn
And cli has boring stuff like: Automaticaly push on first init even if we have other settings to perform and Always after init command, it install aws-amplify with npm
- Check if instance is windows or linux instances, and test RDP or SSH ports on Security Groups.
- Allow add news or change ports to test and configure in security group
- Migrate local ec2 and dynamoDB functions to Lambda Functions
- Allow add other instances not only from same region and account with
- Add Scheduler for admins tasks on panel