0 words written before
The company's recent transformation to serverless is to put some internal CMS and some external websites on AWS. First, we will simply implement a small example of S3 (vue) + API Gateway + lambda for serverless website building.
I feel that there is really no need for ordinary websites to install EC2 on their own, especially for start-up companies. There are few users at the beginning. Isn’t this solution good for charging based on the number of visits? Lambda also has tens of thousands of free visits every month, which is really saving money.
There are also various high availability, dynamic expansion, and security. There is no need to consider it. Find a coder to start working directly, and then wait until the business process runs smoothly. Without further ado, let’s get started
1.1 S3 (Vue) settings
1.1 Create and set up S3 bucket
#1 Create an S3 bucket and enable the static website hosting function #2 Set the index document name to index.html
1.2 Create a simple Vue page
<!--APP.vue-->
<template>
<div id="app">
<img src="./assets/logo.png">
<h3><router-link to="/changeComponent">test vue router</router-link></h3>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<!--ChangeComponent-->
<template>
<div>
<h1>test get string form lambda</h1>
<button @click='getLamda'>lambda</button>
<h2>{
{msg}}</h2>
</div>
</template>
< script>
import axios from 'axios'
export default {
name
: 'ChangeComponent',
data () {
return {
msg: 'click the button you will get lambda return'
}
},
methods: {
getLamda(){
axios.get( 'https://haha, you need to build APIGateWay first to have it/default/demo4lambda').then(
response => {
console.log(response.data)
this.msg=response.data
},
error => {
console.log('error')
}
)
}
}
}
</script>
<!--HelloWorld-->
<template>
<div class="hello">
<h1>{
{ msg }}</h1>
<h2>Essential Links</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<!--index.js-->
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ChangeComponent from '@/components/ChangeComponent'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/changeComponent',
name: 'ChangeComponent',
component: ChangeComponent
}
]
})
1.3 Upload Vue page to S3
1.4 Allow S3 shared access
1.5 Set S3 page access whitelist
{
"Version": "2012-10-17",
"Id": "Policy1618sfdsa313fd336",
"Statement": [
{
"Sid": "Stmt16ssss1112
"Principal": "*",
"Action": "s3:*",
"Resource": "arn:aws-cn:s3:::demo4lambda/*",
"Condition": {
"NotIpAddress": {
"aws:SourceIp": "123.456.789.10/32"
},
"Bool": {
"aws:SecureTransport": "false"
}
}
}
]
}
1.2 Create API GateWay
# 1 Create REST API
# 2 Select lambda function as integration type
# 3 Set content-type, add cross-site permission to header
1.3 Create lambda
1.3.1 Create lambda
# Select Node.js at runtime
1.3.2 Write lambda and deploy
1.4 Testing
Visiting the website can realize page jump and call lambda to return data.
1.5 Follow-up
1.5.1 Domain name issue
The domain name used now is the domain name of s3. In the future, you need to use cloudfront to set the domain name. Then you can cancel the cross-site settings in the API gateway by binding lambda to your own domain name.
1.5.2 DB problem
Lambda needs to access DB, and DB settings need to be added later, so lambda needs to be added to the VPC network.
1.5.3 Security issues
Security issues use AWF and SecurityGroup to implement firewall configuration