因为我暂时没有购买云服务器,所以本博客是基于本地模拟线上部署;模拟项目是Vue+Express+mongoDB搭建而成的项目;
- 后台代码部署
- 前端代码部署
一、后台代码部署
- 首先,express是基于nodeJs的运行环境,所以服务器需要安装nodeJs;
- 通过cmd打开express后台项目;
- node bin/www启动后台代码;
- 后台代码部署完成。
注意:express代码部署需要关注端口号是否被占用?
二、前端代码部署
- 修改前端vue项目代码的打包配置,设置静态资源的公共路径;
- npm run build打包前端文件;
- 将打包生成的dist文件夹移至/xampp/htdocs/文件夹下;
- 本地模拟配置域名,打开本地hosts文件;C:\Windows\System32\drivers\etc\hosts
然后测试域名是否配置成功 - 由于此次项目是前后端分离项目,后端和前端代码服务器不同,则需对前端的apache服务器配置代理;
- 配置虚拟主机,在xampp 文件夹下找到 httpd-vhosts.conf(虚拟主机配置文件)/apache/conf/extra/httpd-vhosts.conf
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>
- 配置反向代理,找到\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
- 配置完之后保存,重启apache服务