Vue: Online deployment based on xampp integrated Apache server

Because I have not purchased a cloud server for the time being, this blog is based on a local simulated online deployment; the simulated project is a project built by Vue+Express+mongoDB;

• Background code deployment
• Front-end code deployment

1. Background code deployment

• First of all, express is a nodeJs-based operating environment, so the server needs to install nodeJs;
• Open the express background project through cmd;
• node bin/www starts the background code;
• The background code is deployed.

Note: Express code deployment needs to pay attention to whether the port number is occupied?

2. Front-end code deployment

• Modify the packaging configuration of the front-end vue project code, and set the public path of static resources;
  
• npm run build packs front-end files;
• Move the dist folder generated by packaging to the /xampp/htdocs/ folder;
• Locally simulate and configure the domain name, open the local hosts file; C:\Windows\System32\drivers\etc\hosts
  
  and test whether the domain name is configured successfully
• Since this project is a front-end and back-end separation project, and the back-end and front-end code servers are different, it is necessary to configure the proxy for the front-end Apache server;
• Configure the virtual host, find httpd-vhosts.conf (virtual host configuration file)/apache/conf/extra/httpd-vhosts.conf under the xampp folder

NameVirtualHost *:80  //找到此行代码去除注释
//配置如下代码
<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot "D:/Software/xampp/xampp/htdocs"
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "D:/Software/xampp/xampp/htdocs/imocdemo"
    ServerName imocdemo.com //为本地hosts配置的地址
    ProxyRequests Off
    <Proxy /goods>  
        Order deny,allow  
        Allow from all  
    </Proxy> 
    ProxyPass  /goods  http://127.0.0.1:3000/goods  //接受请求的接口地址
    ProxyPassReverse /goods http://127.0.0.1:3000/goods
    <Proxy /users>  
        Order deny,allow  
        Allow from all  
    </Proxy> 
    ProxyPass  /users  http://127.0.0.1:3000/users 
    ProxyPassReverse /users http://127.0.0.1:3000/users   
</VirtualHost>

• Configure reverse proxy, find \xampp\apache\conf\httpd.conf

Include conf/extra/httpd-vhosts.conf  //找到此行代码去除注释
//找到以下代码去除注释
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_connect_modulemodules/mod_proxy_connect.so
LoadModule proxy_ftp_modulemodules/mod_proxy_ftp.so
LoadModule proxy_http_modulemodules/mod_proxy_http.so

• Save the configuration and restart the apache service