How to deploy front-end projects in nginx

Deploy the front-end project in Nginx by creating the project structure and dividing the code into public and src directories. Compile source code (optional). Configure the Nginx server block, specify the root directory and domain name. Enable server block. Reload Nginx. Access deployed projects.

How to deploy a front-end project in Nginx

Step 1: Create a project structure

• Create a new directory as the project root directory, for example /var/www/my-app .
• Create two subdirectories in the root directory: public and src .
• Place all front-end code (HTML, CSS, JavaScript) in the public directory.
• Place the source code (such as Sass or TypeScript) in the src directory.

Step 2: Compile the project (optional)

• If you use preprocessors like Sass or TypeScript, you need to compile them to generate optimized code for deployment.
• Run the necessary commands to compile the source code and place it in the public directory.

Step 3: Configure the Nginx Server Block

• Create a new server block in the Nginx configuration file, such as /etc/nginx/sites-available/my-app.conf .
• Paste the following into the file:

 <code>server { listen 80; server_name my-app.com; root /var/www/my-app/public; }</code>

• Replace my-app.com with your actual domain name.
• If your project uses a non-standard port (such as 3000), please update the listen directive.

Step 4: Enable Server Block

• Run the following command to enable the newly created server block:

 <code>sudo ln -s /etc/nginx/sites-available/my-app.conf /etc/nginx/sites-enabled/my-app.conf</code>

Step 5: Reload Nginx

• Run the following command to reload Nginx to apply the changes:

 <code>sudo systemctl reload nginx</code>

Step 6: Access your project

• Navigate to your domain name (for example my-app.com ) in your browser.
• If everything is configured correctly, you should see your front-end project running.

The above is the detailed content of How to deploy front-end projects in nginx. For more information, please follow other related articles on the PHP Chinese website!