Recently, I have been studying Nextjs, and the last step of the tutorial on the official website is to deploy our Next. Js.

What you need to do is

  • Prepare a simple Next. Js APP by following the tutorial on the Nextjs website
  • Install Git Node Nginx PM2 on the server and configure the environment
  • Run the program and access

Prepare a simple Next. Js APP by following the tutorial on the Nextjs website

Address: nextjs.org/learn/basic… Do localhost:3000 to access the page. Then I put the project on Github, and my repository name is Nextjs-blog

Install PM2 Git Node Nginx on the server and configure the environment

I’m a Linux nerd, so please Google the installation process. Briefly, configure the environment.

  1. Use Git cline

    to upload your project. I put it in /var/www/. /var/www/nextjs-blog is the project code.

  2. Manage project progress using PM2

    // Modify package.js file... "start": "next start -p $PORT", "build": "next build && PORT=3000 npm start" ...Copy the code
    NPM install // Install related packagesCopy the code

    Go to the /var/www/nextjs-blog/ directory to execute

    pm2 start npm --name "nextjs-blog" -- run build
Copy the code

    🕯️ : This time you can access your project through the server IP :3000 next we add the domain name mapping, so that users can access your website through the domain name.

  3. Prepare a domain name

    Need to buy a level domain name, have free one year, practice enough. Then add a record resolution domain name to your DNS administrator. I used a secondary domain to access the Next. Js project, so I added the following.

  4. Add the file learn-excel. Conf to the conf.d folder in the nginx directory

    server { listen 80; server_name learn.bancheng.ml; location / { root /var/www/nextjs-blog/; Proxy_pass http://127.0.0.1:3000/; # node. Js port proxy_http_version 1.1; proxy_set_header Host $host; }}Copy the code

Run the project and access

The project is already in operation. Then restart the nginx service, open the bound secondary domain name, and access the project normally. Take a look at my learn.bancheng.ml/