Added page on NextJs Deployment #328
Conversation
| In a brief rundown, the process of deploying a Next.js app on AWS with EC2 consists of creating an EC2 instance (a virtual machine on the cloud), cloning the project's repo into that virtual machine, creating a build file of the app, then finally running the Next.js app as a background process. | ||
|
|
||
| ## Getting started with Next | ||
| Since this is primarily a guide in the deployment process, it is assumed that the reader has their Next.js app already created and ready to go. IF that's not the case, no problem! |
There was a problem hiding this comment.
I believe that it would be helpful to include a link to to the general Next.JS page in the repo here (https://github.com/learning-software-engineering/learning-software-engineering.github.io/blob/main/Topics/Tech_Stacks/NextJS.md)
There was a problem hiding this comment.
Very true. Do you think this link should be add in-line? Or maybe added to a list of numerous external sources at the bottom of the page?
There was a problem hiding this comment.
I think in-line would be best as I can imagine a reader wishing to follow the link while reading this section of the article.
There was a problem hiding this comment.
That makes sense. I think I'll still add external sources anyways, maybe with tutorials on implementing CI/CD with github workflows. That may be useful for a CSC301 student, as realistically, CI/CD is the logical next step after simply deploying their app.
| ## Getting started with Next | ||
| Since this is primarily a guide in the deployment process, it is assumed that the reader has their Next.js app already created and ready to go. IF that's not the case, no problem! | ||
|
|
||
| Next.js is a react framework for the web, which enables you to create **full-stack** Web applications, all by extending React features. In addition to countless online rescources and excellent docs the Next.js team provides, getting started is even simpler with Next.js's command line interface tool, [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app). This helpful tool can really kickstart your development, and get your project off to a clean start. |
There was a problem hiding this comment.
I think it may be helpful to mention the software stacks with which Next JS is used so that a reader can quickly identify if this article is relevant to them (e.g. Next.JS is used with Node.JS, it supports styling with CSS, SCSS, SASS, styled JSX etc).
There was a problem hiding this comment.
You're absolutely right, additionally this would help the page appear in relevant keyword searches,
There was a problem hiding this comment.
Yes that is a great point!
| ## Creating an EC2 Instance | ||
| Now that you've hopefully got your hands a little dirty with Next.js develepment, its time to get your app off localhost and into the cloud! This process begins by creating an EC2 Instance. | ||
|
|
||
| 1) Log in to AWS, or create a free account.(Note you will need to provide credit card information, but as long as you only use free services, you won't get billed). |
There was a problem hiding this comment.
Link to AWS platform would be helpful here
| 1) Log in to AWS, or create a free account.(Note you will need to provide credit card information, but as long as you only use free services, you won't get billed). | ||
| 2) Navigate to the **EC2 Dashboard**.  | ||
| 3) Create a new instance by clicking **Launch Instance**. | ||
| 4) Name your instance (name doesn't really matter), select the Ubuntu server for you Amazon Machine Image, select your desired instance type (micro for free tier), create a new RSA key pair(make sure you keep track of its location). That's it for config; select the **Launch Instance** button at the bottom of the screen. |
There was a problem hiding this comment.
Some more info about config options may be helpful. For example, briefly explain why you choose Ubuntu over Amazon Linux (or why it probably doesn't matter).
There was a problem hiding this comment.
Hmmm you're right. Now that you mention it, I should look into the config options deeper even for myself; its easy to just go with the flow without asking important "why" questions. Realistically, knowing reasoning behind even these small decisions can make future debugging so much easier.
| Now its time to connect to your EC2 instance from your machine. | ||
| 1) Open a terminal in the same directory as the .pem key file that your downloaded earlier when creating your key pair. | ||
| 2) Click the **Connect** tab while your EC2 instance is selected  | ||
| 3) Copy and paste bullet point #3 and the example into your terminal and run both commands. Enter `yes` when asked if you wish to continue connecting. You should now be connected to your EC2 through shell! |
There was a problem hiding this comment.
Unclear what bullet point #3 refers to
There was a problem hiding this comment.
Do you think I should add screen shot of the modal which contains these lines of code? Or copy and paste a generic template. Only problem I can foresee is that students may blindly copy and paste the template without using their proper key file.
There was a problem hiding this comment.
If this is the command to connect to the ec2 instance, then yes I think it would be helpful to include a screenshot (with your personal deployment info censored)
| ## Deploying your app | ||
| 1) In order to make your app feel at home, run `npm i` to install all your node modules into this local repository. | ||
| 2) Next, build your project, by running `npm run build'. Your output should look something like this. | ||
| 3) Finally, to deploy your app as a background process on your cloud server, run `npm start &`. |
There was a problem hiding this comment.
Might be helpful to mention PM2 as an alternative for this that affords better maintainability of a deployed application. I think mentioning this and including a link to a resource about PM2 would suffice
There was a problem hiding this comment.
This is true. PM2 is a very useful resource.
Added a brief but informative guide for deploying a nextjs app using AWS's EC2 service.