web前端同学之如何部署前端项目(基于PHP后端开发)

什么是项目部署简单说就是：

   1.当项目代码编码完工后。

   2.经过专业测试后确定项目可以上线给客户使用了的时候。

   3.这个时候，找一台机器当做服务器，里面安装软件所需要的环境（tomcat/weblogic，Apache）,把代码打成war包，丢进服务器软件指定目录的过程。

一、个人电脑环境要求：

    1.Windows环境

     2.有远程仓库账号，如github，码云等

     3.个人电脑上已经安装了Git

二、电脑公钥获取(生成) SSH key：

1.生成SSH key：在本机的Git安装目录下，如 F:\Git\usr\bin，通过shift+鼠标右键打开属于当前目录的命令窗口。

    

   2. 在当前的命令行窗口上执行命令 ssh-keygen -t rsa -C "email@email.com"，如 ssh-keygen -t rsa -C "2351924453@qq.com"  然后回车请命令执行。

提示1：   按enter键后,先会先告诉你生成的文件保存在哪,再按enter,会提示设置密码。

           

  提示2： 生成的ssh文件一般会保存在C:\Users\Administrator.ssh,会生成两个文件。

   3.用文本编辑器或者记事本 打开文件id_rsa.pub,复制内容,添加到GitHub的ssh keys中。

     

三、将id_rsa.pub中的ssh key添加到远程仓库中，如添加到github或者码云：

    1.登录码云账号，并找到要管理的项目。

    2.找到部署管理，并添加公钥，会进入下图页面，按需填写即可。  手动添加：如图

             方式一：手动添加，如下图：

               

               方式二：用命令行在终端输入：$ clip < ~/.ssh/id_rsa.pub

            提示：点击添加按钮后，会弹出一个验证窗口，此时我们只需输入您的码云登录密码即可。

    3.添加成功后，页面会给出提示，如下图：

    

4.测试一下，ssh key是否添加成功。

               添加到码云在终端输入：ssh -T git@gitee.com

        提示：如果终端提示 “You can use git or hg to connect to Bitbucket. Shell access is disabled.” 则说明，将ssh key添加远程仓库成功。

四、Xftp5远程服务终端的配置：

     提示：远程服务软件有多种，Xshell、WinScp、Xftp等。

    1.下载Xftp并进行傻瓜式安装。

    2.新建远程服务连接。如下面两图：

 

  3.通过Xftp连接服务端后，并进入。

五、打包发布前端文件：

   1.配置项目打包相关路径。

配置文件一：build>>utils.js 

配置文件二：config>>index.js

配置nginx服务端代理

    2.执行npm run build 打包命令。

此时会生成dist文件夹，将里面的：statics文件夹，favicon.png，index.html    三者添加或覆盖到远程服务器项目对应的目录中。

    3. 可能需要项目重启。重启后，就可以通过网址去访问了。

     提示：如果后端使用的是php语言，则不需要重启服务(Apache一类的服务器软件),如果后端是Java语言则需要重启服务。