Amazon Simple Storage Service (S3) is probably the cheapest service in AWS, so it’s a really good idea to think about using this service as website static hosting.
Part 1: VueJS Application Creation
$ npx create-nuxt-app s3-host-app
During the application creation, you’ll be prompted to choose some configurations for your app such as UI framework, Test Framework, Lint and so on
As the focus of this post isn’t the application it self, I’ll not get deeper here, but there are two main configurations that we need to pay attention: Rendering Mode and Deployment Target
These configs will define the deployment model as static and not Server Side Rendering
So, for this example, let’s use the following configuration:
- Project Name: the value it’s already proposed (the app name)
- Package Manager: Npm
- UI Framwork: Vuetify.js
- Nuxt.js Modules: None
- Linting Tools: None
- Test Framwork: None
- Rendering Mode: Single Page App
- Deployment Target: Static/Jamstack hosting
- Deployment Tools: None
- What is your Github username: the value it’s already proposed (it will load from your git config)
- Version control system: Git
Now that we’ve created our app, we may enter in app’s folder and initialize it in development mode, only to check if it’s everything working fine
We can achieve this by running the following commands:
$ cd s3-host-app $ npm run dev
Now we can check http://localhost:3000 to see if it’s running
And voilá: it’s running!
Now, to make it ready for deployment, we need to ask Nuxt to build and generate the files for deployment.
To do this is quite simple:
$ npm run build $ npm run generate
After running these commands we may notice the
dist folder created on our project.
The content of this folder are the files we’ll upload to S3.
Part 2: Configuring the S3 Bucket
We are going to work with public S3 bucket. This is not the best approach. The best/right approach is to work with private bucket and let CloudFront do the public job. Also, we are not going to work with SSL configuration. Probably I'll make posts about these configurations in the future, but for now, let's go with public bucket without SSL
Let’s create our bucket. Nothing special here despite the public configuration. We need to uncheck the option Block all public access, leaving all others checkboxes unchecked and check the knowledge checkbox about leaving the bucket with read public access:
After this, we may leave all other settings the way it is and create the bucket
Now with the bucket created, we need to tell AWS that we want to use this bucket as Static Hosting. To do this we need to go to the Properties tab and scroll down to Static website hosting and hit the Edit button:
Now it’s very simple, we only need to enable the static hosting and inform what is the index file. In our case, index.html:
Now we may save the changes we made and then go back to Objects tab and hit the Upload button.
Attention: we want to upload the content of the
dist folder and not the folder itself.
Now we can upload the files by clicking on Add Files button:
Notice that the folders are not selected. After uploading the files, we need to click on Upload Folder to upload the folders (one at a time).
Now we need to go Permissions section and let the files with public read access and, again, check the knowledge checkbox:
After that we can hit the Upload button, wait for the upload to finish and then, click on Close button, get back to Properties tab, scroll down to Static website hosting and we’ll notice the site URL:
So now it’s the test moment! Let’s click on the link and…