CODEWITHSUNDEEP
next.jsweb-deploymentawsdeploy
Ajith Arasu
Ajith Arasu

Reputation: 109

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

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.

project structure

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**

Upvotes: 1

Views: 640

Answers (1)

jayaprakash R
jayaprakash R

Reputation: 192

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

Upvotes: 1

Related Questions