How to deploy next.js application to AWS, What is the entry file for the server?

Question

Am using nextjs project. From the below image, you can find my folder structure. In my local machine, I can complete the npm run build and npm run start. the build creation and page display are done successfully. when am trying to host the project in the AWS webserver I can't display my page. build creation was successful. but the page URL returns 502, or 403 errors.

Package.json

{
  "name": "yadara-frontend-next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export" : "next export"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "compression": "^1.7.4",
    "compression-webpack-plugin": "^9.2.0",
    "copy-webpack-plugin": "^10.2.4",
    "cra-template-pwa": "1.0.3",
    "dotenv-webpack": "^7.1.0",
    "env-cmd": "^10.1.0",
    "eslint": "8.29.0",
    "eslint-config-next": "13.0.6",
    "form-data": "^4.0.0",
    "formik": "^2.2.9",
    "gzipper": "6.0.0",
    "hookrouter": "^1.2.5",
    "html-react-parser": "^1.3.0",
    "html-webpack-plugin": "^5.5.0",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "lodash-webpack-plugin": "^0.11.6",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "next": "13.0.6",
    "pdf-merger-js": "^4.1.0",
    "qs": "^6.10.1",
    "react": "18.2.0",
    "react-bootstrap": "^1.5.2",
    "react-content-loader": "^6.0.3",
    "react-datepicker": "^4.6.0",
    "react-dom": "18.2.0",
    "react-facebook-login": "^4.1.1",
    "react-geolocated": "^3.2.0",
    "react-google-login": "^5.2.2",
    "react-input-range": "^1.3.0",
    "react-lazyload": "^3.2.0",
    "react-payment-inputs": "^1.1.8",
    "react-redux": "^7.2.4",
    "react-scripts": "4.0.3",
    "react-scroll": "^1.8.4",
    "react-select": "^4.3.1",
    "react-slick": "^0.28.1",
    "redux": "^4.1.0",
    "redux-thunk": "^2.3.0",
    "resolve-url-loader": "^5.0.0",
    "sharethis-reactjs": "^1.6.0",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.0",
    "terser-webpack-plugin": "^5.3.1",
    "universal-cookie": "^4.0.4",
    "web-vitals": "^1.1.2",
    "yup": "^0.32.9"
  }
}

should I have to update any changes on package.json data? what is the entry point for the AWS server? am using server-side rendering on the _app.js page, so am not having any index.html files in the build.

                                       **Thanks for your effort**

Yeah, mention about EC2-instance using ubuntu 8.0. @pguardiario — Ajith Arasu, Dec 17 '22 at 07:32
There's a lot of ways to configure it, virtual host with nginx maybe? Consider switching to Vercel though — pguardiario, Dec 18 '22 at 00:46

score 1 · Accepted Answer · answered Dec 19 '22 at 04:28

There is no root path for this in webconfig file. You should configure it as reverse proxy in webconfig file as below,

    location / {
            proxy_pass             http://127.0.0.1:3000;
            proxy_read_timeout     60;
            proxy_connect_timeout  60;
            proxy_redirect         off;

            # Allow the use of websockets
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
    }

before start the pm2 service using below command

$ pm2 --name dev-name start npm -- start

Then configure the env file as per your requirement

How to deploy next.js application to AWS, What is the entry file for the server?

1 Answers1