开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天、第 12 篇，点击查看活动详情 目录

Oneinstack自动安装

数据库配置

打包前端项目

配置nginx服务器

Tips：为什么不直接贴代码要这么麻烦？拒绝伸手党从我做起。

Oneinstack自动安装

首先需要在我们服务器上构建起基本的运行环境，我们利用OneinStack - 一键PHP/JAVA安装工具快速构建

进入OneinStack - 一键PHP/JAVA安装工具官网，点击菜单栏自动安装，按照如图所示配置

编辑

图上的是最基本的若依部署所需的，按照自己的需求可以再选择

选择完成以后，复制安装命令

编辑

这里我们默认你已经准备好了远程连接后端的工具，以及准备好的linux服务器，在这里我们使用的是Xshell跟Xftp来控制我们的服务器

打开xshell并连接服务器，直接输入刚刚复制的安装命令回车键运行进行安装，并等待安装完成，这是一个相对比较漫长的过程

编辑

你太棒了，完成了Oneinstack 配置！Excellent!接下来我们开始各个软件、服务器的配置

编辑

数据库配置

首先是配置数据库

命令行输入

mysql -u root -p

输入回车会让你输入密码，就是我们oneinstack安装时设置的密码

登录MySQL

编辑

现在你已经进入到了mysql，输入命令

GRANT ALL PRIVILEGES ON . TO 'root'@'%'IDENTIFIED BY 'yourpassword' WITH GRANT OPTION;

给root用户添加远程连接权限，接着输入

flush privileges;

刷新一下数据库，刚才那句命令才会正常生效，这样我们就可以用自己电脑上的数据库可视化工具去操作云端服务器的数据库了

输入命令

exit

退出mysql

接下来在我们的电脑上打开数据库可视化工具并连接上我们服务器上的数据库，至于怎么连接，自行百度，尝试把项目的数据库表格给导入到服务器mysql中，如图

编辑

这就是楼主成功导入后的截图，如果你跟楼主一样，那么恭喜你我们成功完成了数据库的配置，至于出了啥问题自行百度。

打包前端项目

注意点在于需要配置的两条信息。

编辑

根目录下终端执行

Npm run build:prod进行打包

编辑

打包出来的文件会放在dist目录下，复制打包出来的所有内容到服务器内,目前发现的不能放在root目录下，推测是用户权限的问题，nginx找不到。推荐在/data/wwwroot目录下新建项目目录在复制进去，如图所示

编辑

现在访问你的前端页面还十分困难，因此我们利用nginx给我们代理

配置nginx服务器

接下来配置nginx服务器

nginx代理服务器，可以解决一些安全、跨域等问题，详情请课外自主学习

打开xftp，并连接到自己的服务，进入下图所示目录，找到nginx.conf文件，右键点击文件，点击用记事本编辑

编辑

拉到最底下，找到用被#####字符包围的server标签，删除原有的配置，改为以下代码


server {

 listen 8090;//运行前端的端口

    server_name 你的公网IP;

 location /prod-api/{

#nginx反向代理，目的是监听这个端口发出的请求并转发到后端，解决跨域问题这里是匹配开头为/prod-api/的请求,浏览器运行时打开开发者工具可以看到生产环境下前端发出的请求都是以/prod-api/开头的

#proxy_set_header Host $http_host;

#proxy_set_header X-Real-IP $remote_addr;

#proxy_set_header REMOTE-HOST $remote_addr;

#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

#这里注释掉的一大段可以取代下面一行

include proxy.conf;

#引入同目录下的配置文件，是oneinstack给你配置好的一些配置变量，具体作用自行学习

  proxy_pass http://localhost:9999/;

#将匹配到的请求转发到改地址，因为我们的后端跟前端部署在同一服务器下，因此这里可以填localhost，推荐改成服务器地址以免混淆

}

location /profile/ {

#同样是反向代理，这里是代理的文件（上传到你服务器的图片等文件）的请求

proxy_pass http://127.0.0.1:8080/profile/;

#127.0.0.1=localhost

}

location /{

#正向代理，响应浏览器发送到服务器这个端口的请求不过nginx并不知道自己是正向还是反向只负责监听,因此总是会被匹配到，不过因为并没有转发请求，因此并不会影响代理效果，不过还是建议放在最后，请求在前面匹配了并被转发了就不会匹配到这里了

root /data/wwwroot/project/cxproject;

#根目录配置,会在此目录先找你想返回的文件,也就是你前端文件放置的位置

try_files $uri $uri/ /index.html;

#它可以按顺序检查文件是否存在，并返回第一个找到的文件，如果未找到任何文件，则会调用最后一个参数进行内部重定向（相当于修改了请求），网页跳转到404页面可能就是没有它

Index index.html index.htm;

#在最终的路径下找入口文件并返回

 }

error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root html;

        }

}