0 mots écrits avant
La récente transformation de l'entreprise vers le sans serveur consiste à placer certains CMS internes et certains sites Web externes sur AWS. Tout d'abord, nous allons simplement implémenter un petit exemple de S3(vue)+API Gateway+lambda pour la création de sites Web sans serveur.
Je pense qu'il n'est vraiment pas nécessaire que les sites Web ordinaires installent EC2 tout seuls, surtout pour les start-ups. Il y a peu d'utilisateurs au début. Cette solution n'est-elle pas bonne pour facturer en fonction du nombre de visites ? Lambda propose également des dizaines de milliers de visites gratuites chaque mois, ce qui permet de réaliser de réelles économies.
Il existe également différents types de haute disponibilité, d'expansion dynamique et de sécurité. Il n'est pas nécessaire d'en tenir compte. Trouvez un codeur pour commencer à travailler directement, puis attendez que le processus métier se déroule sans problème. Sans plus tarder, commençons
1.1 Paramètres S3 (Vue)
1.1 Créer et configurer le compartiment S3
#1 Créez un compartiment S3 et activez la fonction d'hébergement de site Web statique #2 Définissez le nom du document d'index sur index.html
1.2 Créer une page Vue simple
<!--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 {
nom : 'App'
}
</script>
<style>
#app {
famille de polices : 'Avenir', Helvetica, Arial, sans-serif ;
-webkit-font-smoothing : anticrénelé ;
-moz-osx-font-smoothing : niveaux de gris ;
alignement du texte : centre ;
couleur : #2c3e50 ;
marge supérieure : 60 pixels ;
}
</style>
<modèle>
<div>
!--ChangeComponent-->
<h1>tester l'obtention du formulaire de chaîne lambda</h1>
<button @click='getLamda'>lambda</button>
<h2>{
{msg}}</h2>
</div>
</template>
<script>
import axios de 'axios'
export default {
name
: 'ChangeComponent',
data () {
return {
msg: 'cliquez sur le bouton, vous obtiendrez un retour lambda'
}
},
méthodes : {
getLamda(){
axios.get('https: //哈哈这个要先建好APIGateWay才会有哦/default/demo4lambda').then(
réponse => {
console.log(response.data)
this.msg=response.
},
erreur de données => {
console.log('error')
}
)
}
}
}
</script>
<!--HelloWorld-->
<template>
<div class="hello">
<h1>{
{ msg }}</h1>
<h2 >Liens essentiels</h2>
</div>
</template>
<script>
export default {
name : 'HelloWorld',
data () {
return {
msg : 'Bienvenue dans votre application Vue.js'
}
},
}
</script>
<
!-- Ajoutez l'attribut "scoped" pour limiter le CSS à ce composant uniquement -->
h1, h2 {
font-weight: normal;-- Ajoutez l'attribut "scoped" pour limiter le CSS à ce composant uniquement -->
<style scoped>
}
ul {
list-style-type : aucun ;
remplissage : 0 ;
}
li {
display: inline-block;
marge : 0 10px ;
}
une {
couleur : #42b983 ;
}
</style>
<
!--index.js-->
importer Vue depuis 'vue'
importer le routeur depuis 'vue-router'
importer HelloWorld depuis '@/components/HelloWorld'
importer ChangeComponent depuis '@/components/ChangeComponent'
Vue.use(Router)
exporter
le nouveau routeur par défaut ({
routes : [
{
chemin : '/',
nom : 'HelloWorld',
composant : HelloWorld
},
chemin : '/changeComponent',
nom : 'ChangeComponent',
composant : ChangeComponent
}
]
})
1.3 Télécharger la page Vue sur S3
1.4 Autoriser l'accès partagé S3
1.5 Définir la liste blanche d'accès aux pages S3
{
"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":"faux"
}
}
}
]
}
1.2 Créer une passerelle API
# 1 Créer une API REST
# 2 Sélectionnez la fonction lambda comme type d'intégration
# 3 Définissez le type de contenu, ajoutez une autorisation intersite à l'en-tête
1.3 Créer un lambda
1.3.1 Créer un lambda
#Sélectionnez Node.js au moment de l'exécution
1.3.2 Écrire lambda et déployer
1.4 Tests
La visite du site Web peut réaliser un saut de page et appeler lambda pour renvoyer des données.
1.5 Suivi
1.5.1 Problème de nom de domaine
Le nom de domaine utilisé maintenant est le nom de domaine de s3. Vous devrez utiliser cloudfront pour définir le nom de domaine ultérieurement. Ensuite, lambda liera également son propre nom de domaine pour annuler les paramètres intersites dans la passerelle API.
1.5.2 Problème de base de données
Lambda doit accéder à la base de données et les paramètres de la base de données doivent être ajoutés ultérieurement, donc lambda doit être ajouté au réseau VPC.
1.5.3 Problèmes de sécurité
Les problèmes de sécurité utilisent AWF et SecurityGroup pour implémenter la configuration du pare-feu