SoFunction
Updated on 2025-04-09

The deployment and configuration process of front-end projects on common web servers

A Web server is a software used to store, process and transmit Web content. It is a special type of server with the ability to process HTTP requests and return web pages and other content to the browser. The web server supports multiple programming languages, such as PHP, JavaScript, Ruby, Python, etc., and supports dynamic generation of web pages. Common web servers include Apache, Nginx, Microsoft IIS, etc.

1. Nginx

Nginx is generally the preferred web server for front-end project deployment.

Using Nginx as a server to deploy a Vue project is as follows:

  1. Install Nginx: If you haven't installed Nginx, please install it first.
  2. Build a Vue project: Use the command "npm run build" to build a production version of the Vue project.
  3. Copy dist folder: Copy the generated dist folder into the html folder of Nginx.
  4. Configure Nginx: Edit Nginx's configuration file (usually ) and add the following to configure access to the project:
server {
    listen 80;
    server_name your_domain_name;
    root /path/to/your/dist;
    index ;

    location / {
        try_files $uri $uri/ /;
    }
}
  1. Restart Nginx: Use the command "nginx -s reload" to restart Nginx.
  2. Browse deployed Vue projects: Visit http://your_domain_name/ through your browser to view deployed Vue projects.

Please note: The above assumes that the domain name has been configured and mapped to the server's IP address. If the domain name has not been configured, use the server's IP address accordingly instead.

2. Apache

The steps to deploy a Vue project using Apache as a server are as follows:

  • Build a Vue project: Use the command "npm run build" in a Vue project to build a production version of a Vue project.
  • Install Apache: If Apache has not been installed, please install Apache first.
  • Configure Apache: Configure Apache so that it can serve static files. This can be done by adding the following to the Apache configuration file:
<Directory "/var/www/html">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>
  • Copy file: Copy the generated files in the dist folder to the /var/www/html directory in the root directory of Apache.
  • Configure URL rewrite: Install the mod_rewrite module, and then add the following URL rewrite rules in the Apache configuration file:
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . / [L]
</IfModule>
  • Restart Apache: Use the command "sudo service apache2 restart" to restart Apache.
  • Test: Access the server's IP address or domain name through the browser to view the deployed Vue project.

Please note: The above assumes that the domain name has been configured and mapped to the server's IP address. If the domain name has not been configured, use the server's IP address to replace it accordingly. In addition, the configuration file path and command may vary depending on the operating system, please adjust it according to the actual situation.

III.

The steps to deploy a Vue project using IIS as a server are as follows:

  • Build a Vue project: Use the command "npm run build" in a Vue project to build a production version of a Vue project.
  • Install IIS: If IIS has not been installed, please install IIS first.
  • Create a site: Create a new site in IIS and copy the files in the generated dist folder to the site's root directory.
  • Configure Default Document: In the site configuration in IIS, set "" as the default document.
  • Configure URL Rewrite: Install the URL Rewrite module (ARR: Application Request Routing), and then add the following URL rewrite rules to the site configuration in IIS:
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
    <match url="^.*" />
    <conditions logicalGrouping="MatchAny">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    </conditions>
    <action type="Rewrite" url="/" />
</rule>
  • Start the site: Start the site and access the site URL through the browser to view the deployed Vue project.

Please note: The above assumes that the domain name has been configured and mapped to the server's IP address. If the domain name has not been configured, use the server's IP address accordingly instead.

4. Apache Tomcat

Using Apache Tomcat as a server to deploy a Vue project is as follows:

  • Install Apache Tomcat: If you haven't installed Apache Tomcat yet, please install it first.
  • Build a Vue project: Use the command "npm run build" to build a production version of the Vue project.
  • Copy dist folder: Copy the generated dist folder into the webapps folder of Apache Tomcat.
  • Configure Context: In Tomcat's conf/ file, add the following to configure access to the project:
<Context path="" docBase="your_project_name" />
  • Start Tomcat server: Start Tomcat server.
  • Browse the deployed Vue project: access http://localhost:8080/your_project_name/ through the browser to view the deployed Vue project.

Note: The above assumes that Tomcat's default port 8080 is used. If another port is used, change the browser access address accordingly.

This is the article about the deployment configuration of front-end projects on common web servers. For more related front-end projects, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!