ubuntu: Deploy multiple vue projects using apache2 server on ubuntu system

To deploy multiple Vue.js projects using Apache2 server on Ubuntu system, you can follow the steps below:

1. Install Apache2

If Apache2 is not installed on your system, you can install it using the following command:

sudo apt update
sudo apt install apache2

2. Configure virtual host

To deploy multiple Vue.js projects, it is best to configure a separate virtual host for each project. In this way, each project can have an independent domain name or subdomain name and can be configured separately.

First, create a virtual host configuration file. Suppose you have two projects, namely "project1" and "project2", you can execute the following command:

sudo nano /etc/apache2/sites-available/project1.conf

Then, add the following configuration in the editor (replace domain name and file path with actual values):

<VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName project1.com

    DocumentRoot /var/www/project1/dist   # 项目1的Vue.js打包后的目录路径

    <Directory /var/www/project1/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Save and close the file. Then create the virtual host configuration file for the second project:

sudo nano /etc/apache2/sites-available/project2.conf

Then add a configuration similar to the following:

 
<VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName project2.com

    DocumentRoot /var/www/project2/dist   # 项目2的Vue.js打包后的目录路径

    <Directory /var/www/project2/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Save and close the file.

3. Enable virtual host

Next, enable these two virtual host profiles:

 
sudo a2ensite project1.conf
sudo a2ensite project2.conf

4. Restart the Apache2 server

sudo systemctl restart apache2

5. Set up domain name resolution

Make sure your domain name has resolved to your server IP address. You can configure domain name resolution on the DNS management panel, or add entries in the local /etc/hosts file to simulate domain name resolution, such as:

sudo nano /etc/hosts

Add the following lines to the file:

127.0.0.1 project1.com
127.0.0.1 project2.com

Save and close the file.

6. Deploy Vue.js project

Upload the packaging file of each Vue.js project (usually in the dist directory) to the corresponding directory (DocumentRoot path configured above).

7. Test

Now, you can visit http://project1.com and http://project2.com in the browser to check whether your Vue.js project is successfully deployed.

These steps can help you deploy multiple Vue.js projects using Apache2 server on Ubuntu system. Each project has its own independent virtual host configuration to ensure that they can run independently on the same server.

---

8.Remarks

• If there is no domain name, ServerName can be replaced by your_server_ip # Use the IP address of the server