[{"data":1,"prerenderedAt":137},["ShallowReactive",2],{"content-paved-path-lift-and-shift-a-web-app-to-serverless-8-storage-migration":3},{"markdown":4,"frontMatterAttributes":5,"bodyRaw":9,"contributorPaths":10,"menuType":12,"contentName":13,"slug":14,"readingTime":15,"menu":16,"nextDocItem":98,"previousDocItem":83},"\u003Cp>In the original application, when a new product is created, a new image is uploaded to the Node.js\u002FExpress server. However, now the application resides in a Lambda function. The code (and files) that are part of that function cannot change, unless the function is redeployed. Consequently, you must separate the user storage from the server code.\u003C\u002Fp>\n\u003Cp>For doing this, there are a couple of solutions: using \u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fefs\u002F\">Amazon Elastic File System (EFS)\u003C\u002Fa> or Amazon S3. EFS is a file storage, and you can use that to have a dynamic storage where you upload the new images. Using EFS won’t change much of the code, as the original implementation is using a directory inside the server as EFS provides. However, using EFS adds more complexity to the application, as functions that use EFS must be inside an Amazon Virtual Private Cloud (\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fvpc\u002F\">Amazon VPC\u003C\u002Fa>).\u003C\u002Fp>\n\u003Cp>Using S3 to upload your images to the application is simpler, as it only requires that an S3 bucket exists. For doing this, you must refactor the application, from uploading the image to the application API to use the AWS Amplify library that uploads and gets images from S3.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-js\">export function uploadImage(file) {\n    const fileName = `uploads\u002F${file.name}`;\n\n    const request = Storage.put(fileName, file).then((result) => {\n        return {\n            image: fileName,\n            success: true,\n        };\n    });\n\n    return {\n        type: IMAGE_UPLOAD,\n        payload: request,\n    };\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>An important benefit of using S3 is that you can also use Amazon CloudFront to accelerate the retrieval of the images from the cloud.\u003C\u002Fp>\n\u003Cp>In this way, you can speed up the loading time of your page. You can see how this is implemented \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=gb1SfY7u118\">step by step in this video\u003C\u002Fa>.\u003C\u002Fp>\n",{"title":6,"order":7,"youtubeVideoID":8},"Storage migration",9,"Z4frDpp4PcM","In the original application, when a new product is created, a new image is uploaded to the Node.js\u002FExpress server. However, now the application resides in a Lambda function. The code (and files) that are part of that function cannot change, unless the function is redeployed. Consequently, you must separate the user storage from the server code.\n\nFor doing this, there are a couple of solutions: using [Amazon Elastic File System (EFS)](https:\u002F\u002Faws.amazon.com\u002Fefs\u002F) or Amazon S3. EFS is a file storage, and you can use that to have a dynamic storage where you upload the new images. Using EFS won’t change much of the code, as the original implementation is using a directory inside the server as EFS provides. However, using EFS adds more complexity to the application, as functions that use EFS must be inside an Amazon Virtual Private Cloud ([Amazon VPC](https:\u002F\u002Faws.amazon.com\u002Fvpc\u002F)).\n\nUsing S3 to upload your images to the application is simpler, as it only requires that an S3 bucket exists. For doing this, you must refactor the application, from uploading the image to the application API to use the AWS Amplify library that uploads and gets images from S3.\n\n```js\nexport function uploadImage(file) {\n    const fileName = `uploads\u002F${file.name}`;\n\n    const request = Storage.put(fileName, file).then((result) => {\n        return {\n            image: fileName,\n            success: true,\n        };\n    });\n\n    return {\n        type: IMAGE_UPLOAD,\n        payload: request,\n    };\n}\n```\n\nAn important benefit of using S3 is that you can also use Amazon CloudFront to accelerate the retrieval of the images from the cloud.\n\nIn this way, you can speed up the loading time of your page. You can see how this is implemented [step by step in this video](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=gb1SfY7u118).\n",[11],"content\u002Fcontributors\u002Fmarcia-villalba.json","LESSON","Lift and shift a web app to serverless","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F8-storage-migration","2 min",[17,36,46,54,63,72,81,91,96,105,113,122,130],{"title":18,"content":19},"Introduction",[20],{"title":18,"order":21,"youtubeVideoID":22,"learningGoals":23,"resources":28,"time":15,"path":33,"id":34,"link":35},1,"O-hSs7aF7JE",[24,25,26,27],"Understand what lift and shift migrations are","Understand the benefits of serverless architecture","Learn how to migrate applications and databases from serverful to serverless","Learn patterns for migrating your services onto AWS.",[29],{"link":30,"text":31,"type":32},"https:\u002F\u002Fblog.marcia.dev\u002Flift-and-shift-a-web-app-to-serverless#heading-requirements-for-migration","Lift and shift to Serverless","text","1-introduction","1-introduction.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F1-introduction",{"title":37,"content":38},"Guide",[39],{"title":40,"order":41,"time":42,"path":43,"id":44,"link":45},"Requirements for migration",2,"1 min","2-requirements-for-migration","2-requirements-for-migration.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F2-requirements-for-migration",{"title":-1,"content":47},[48],{"title":49,"order":50,"time":42,"path":51,"id":52,"link":53},"Application overview",3,"3-application-overview","3-application-overview.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F3-application-overview",{"title":-1,"content":55},[56],{"title":57,"order":58,"youtubeVideoID":59,"time":42,"path":60,"id":61,"link":62},"Database migration",4,"Mic2TGzzVXk","4-database-migration","4-database-migration.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F4-database-migration",{"title":-1,"content":64},[65],{"title":66,"order":67,"youtubeVideoID":68,"time":15,"path":69,"id":70,"link":71},"Backend migration",5,"MvVaFPCdiZY","5-backend-migration","5-backend-migration.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F5-backend-migration",{"title":-1,"content":73},[74],{"title":75,"order":76,"youtubeVideoID":77,"time":15,"path":78,"id":79,"link":80},"Web app migration",6,"gQn4XPfpdZE","6-webapp-migration","6-webapp-migration.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F6-webapp-migration",{"title":-1,"content":82},[83],{"title":84,"order":85,"youtubeVideoID":86,"time":87,"path":88,"id":89,"link":90},"Authentication and authorization migration",7,"KRnZvbVT7uk","3 min","7-authentication-and-authorization-migration","7-authentication-and-authorization-migration.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F7-authentication-and-authorization-migration",{"title":-1,"content":92},[93],{"title":6,"order":7,"youtubeVideoID":8,"time":15,"path":94,"id":95,"link":14},"8-storage-migration","8-storage-migration.md",{"title":-1,"content":97},[98],{"title":99,"order":100,"youtubeVideoID":101,"time":42,"path":102,"id":103,"link":104},"Testing this application",11,"U_7xD-o5mCA","9-testing-this-application","9-testing-this-application.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F9-testing-this-application",{"title":-1,"content":106},[107],{"title":108,"order":109,"youtubeVideoID":101,"time":15,"path":110,"id":111,"link":112},"How much does this application cost?",12,"10-pricing-of-migrated-application","10-pricing-of-migrated-application.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F10-pricing-of-migrated-application",{"title":-1,"content":114},[115],{"title":116,"order":117,"youtubeVideoID":118,"time":87,"path":119,"id":120,"link":121},"Performance analysis",13,"B0pDPSQcAf4","11-performance-analysis","11-performance-analysis.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F11-performance-analysis",{"title":-1,"content":123},[124],{"title":125,"order":126,"time":42,"path":127,"id":128,"link":129},"Conclusion",14,"12-conclusion","12-conclusion.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F12-conclusion",{"title":-1,"content":131},[132],{"title":133,"order":117,"time":42,"path":134,"id":135,"link":136},"Extra resources","13-extra-resources","13-extra-resources.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F13-extra-resources",1792665265289]