影城项目 DAY09 （VueCLI项目上线流程）

所需要的软件：nginx， pm2

大致步骤

1. 将后端项目上线并测试通过。

   安装mysql。

   初始化数据库脚本。

   将后端程序上传到服务器，并且配置好数据库访问参数，通过pm2启动服务即可。

2. 将前端项目上线并完成联调。

   将VueCLI项目进行打包编译。输出为dist资源包。

   下载安装nginx软件，启动nginx服务，代理dist目录作为网站根目录。

3. 域名管理。

---

1.将前端项目上线并完成联调

将VueCLI项目进行打包编译。输出为dist资源包。

进入VueCLI项目根目录，执行命令：

npm run build

命令执行完毕后，将会在当前目录下生成dist文件夹。  如下：

 2.将前端项目上线并完成联调。

Nginx

nginx是一款优秀的web反向代理服务软件。

将打包好的dist前端项目，基于nginx完成部署上线。

实现步骤：

1. 下载nginx-1.23.4.zip。

   conf：存放nginx配置文件。

   nginx.exe：nginx的可执行程序。

2. 双击nginx.exe, 启动nginx服务器。 nginx服务将占用80端口提供web代理服务。

3. 浏览器访问：

   http://localhost/
   http://localhost:80/

4. 将vueCLI打的项目包（dist目录）交给nginx服务来管理。使得访问某些路径时，可以指向dist/index.html。

5. 打开nginx的主配置文件： nginx安装目录/conf/nginx.conf。

   # 当访问：http://localhost/
   location / {
       # root定义网站根目录   html
       root   dist;
       # index定义网站的首页   html/index.html
       index  index.html index.htm;
       # 避免f5刷新后404
       try_files  $uri  $uri/  /index.html;
   }

   6.在nginx目录下执行命令，重新加载nginx配置文件即可：

   nginx.exe  -s  reload

   7.此时上线配置基本完成，访问如下地址：

   http://localhost/

   如果希望通过域名来代替主机名/ip地址，来访问该项目，则需要先准备一个域名。然后申请域名解析服务(DNS)，将域名与ip地址做好映射关系，就可以使用域名来访问项目了。

   http://212.12.133.32/
   http://www.bmd.com

   windows操作系统中有一个系统配置文件可以在本机环境下模拟域名解析服务：hosts文件

   C:\Windows\System32\drivers\etc\hosts 文件

   以管理员的身份，在该hosts文件中添加一个本机的域名解析：

   127.0.0.1   www.bmd.com

   

    成功！！