0 palabras escritas antes
La reciente transformación de la compañía hacia la tecnología sin servidor consiste en colocar algunos CMS internos y algunos sitios web externos en AWS. Primero, simplemente implementaremos un pequeño ejemplo de S3 (vue) + API Gateway + lambda para la creación de sitios web sin servidor.
Siento que realmente no hay necesidad de que los sitios web comunes instalen EC2 por sí solos, especialmente para las empresas de nueva creación. Hay pocos usuarios al principio. ¿No es buena esta solución para cobrar según el número de visitas? Lambda también tiene decenas de miles de visitas gratuitas cada mes, lo que realmente supone un ahorro de dinero.
También existen varios tipos de alta disponibilidad, expansión dinámica y seguridad, no es necesario considerarlo, busque un codificador para comenzar a trabajar directamente y luego espere hasta que el proceso de negocio se desarrolle sin problemas. Sin más preámbulos, comencemos.
1.1 Configuración de S3 (Vue)
1.1 Crear y configurar el depósito S3
#1 Cree un depósito S3 y habilite la función de alojamiento de sitios web estáticos. #2 Establezca el nombre del documento de índice en index.html
1.2 Crea una página Vue simple
<!--APP.vue-->
<plantilla>
<div id="aplicación">
<img src="./assets/logo.png">
<h3><router-link to="/changeComponent">prueba vue router</router-link></h3>
<router-view/>
</div>
</template>
<script>
export default {
nombre: 'Aplicación'
}
</script>
<style>
#app {
familia de fuentes: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: escala de grises;
alineación de texto: centro;
color: #2c3e50;
margen superior: 60 píxeles;
}
</style>
<
!--ChangeComponent-->
<plantilla>
<div>
<h1>prueba obtener cadena forma lambda</h1>
<button @click='getLamda'>lambda</button>
<h2>{
{msg}}</h2>
</div>
</template>
<script>
importar axios de 'axios'
export default {
nombre
: 'ChangeComponent',
data () {
return {
msg: 'haga clic en el botón y obtendrá lambda return'
}
},
métodos: {
getLamda(){
axios.get('https: //哈哈这个要先建好APIGateWay才会有哦/default/demo4lambda').then(
respuesta => {
console.log(response.data)
this.msg=respuesta.
},
error => {-- Agregue el atributo "con alcance" para limitar CSS a este componente únicamente -->
<estilo con alcance>
console.log('error')
}
)
}
}
}
</script>
<!--HelloWorld-->
<template>
<div class="hola">
<h1>{
{ msg }}</h1>
<h2 >Enlaces esenciales</h2>
</div>
</template>
<script>
export default {
nombre: 'HelloWorld',
data () {
return {
msg: 'Bienvenido a su aplicación Vue.js'
}
},
}
</script>
<
!-- Agregue el atributo "scoped" para limitar CSS a este componente únicamente -->
h1, h2 {
font-weight: normal;
}
ul {
tipo-estilo de lista: ninguno;
relleno: 0;
}
li {
mostrar: bloque en línea;
margen: 0 10px;
}
a {
color: #42b983;
}
</style>
<
!--index.js-->
importar Vue desde 'vue'
importar enrutador desde 'vue-router'
importar HelloWorld desde '@/components/HelloWorld'
importar ChangeComponent desde '@/components/ChangeComponent'
Vue.use(Router)
exporta
el nuevo enrutador predeterminado({
rutas: [
{
ruta: '/',
nombre: 'HelloWorld',
componente: HelloWorld
},
ruta: '/changeComponent',
nombre: 'ChangeComponent',
componente: ChangeComponent
}
]
})
1.3 Cargar la página de Vue a S3
1.4 Permitir el acceso compartido a S3
1.5 Establecer la lista blanca de acceso a la página S3
{
"Versión": "2012-10-17",
"Id": "Policy1618sfdsa313fd336",
"Declaración": [
{
"Sid": "Stmt16ssss1112
"Principal": "*",
"Acción": "s3:*" ,
"Recurso": "arn:aws-cn:s3:::demo4lambda/*",
"Condición": {
"NotIpAddress": {
"aws:SourceIp": "123.456.789.10/32"
},
"Bool": {
"aws:TransporteSecure":"falso"
}
}
}
]
}
1.2 Crear puerta de enlace API
# 1 Crear API REST
# 2 Seleccionar la función lambda como tipo de integración
# 3 Establecer el tipo de contenido, agregar permiso entre sitios al encabezado
1.3 Crear lambda
1.3.1 Crear lambda
# Seleccione Node.js en tiempo de ejecución
1.3.2 Escribir lambda e implementar
1.4 Pruebas
Al visitar el sitio web, se puede realizar un salto de página y llamar a lambda para devolver datos.
1.5 Seguimiento
1.5.1 Problema con el nombre de dominio
El nombre de dominio utilizado ahora es el nombre de dominio de s3. En el futuro, necesitará usar cloudfront para configurar el nombre de dominio. Luego puede cancelar la configuración entre sitios en la puerta de enlace API vinculando lambda a su propio nombre de dominio.
1.5.2 Problema de base de datos
Lambda necesita acceder a la base de datos y la configuración de la base de datos debe agregarse más adelante, por lo que es necesario agregar lambda a la red VPC.
1.5.3 Problemas de seguridad
Los problemas de seguridad utilizan AWF y SecurityGroup para implementar la configuración del firewall