今天有前端的代码需要部署到服务器上,自己实在是太菜了,中间遇到许多问题,不过最终暂时成功,有点乱,这里做个小结。
本文将以遇到问题,及如何解决的形式展开,仅为个人浅薄理解。
项目采用烂小街的前后端分离Vue+Springboot
1.什么是前端部署?
笔者对前端的理解不深,甚至可以说完全不懂前端。项目团队中前端的同学把编译好的vue代码给我时,我开始觉得很简单——不就是把代码塞到后端里么,然后后端部署到服务器上。
不过有这么一个念头(一行代码)在我脑中闪过
npm run server
前端要运行起来呀,我难道需要在服务器上安装npm,然后运行吗?
搜索资料后,我意识到,有远比这优雅的方法。
我找到的方法有两种:
1.部署在tomcat中,不过因为tomcat依赖java环境,所以配置可能复杂一些。
2.部署在nginx中。
最终我衡量之下选择后者,因为项目本身使用了nginx。
2.nginx配置
我完全没接触过nginx,通过数十分钟的学习大概了解到,nginx大概是个服务器,并且可以做一些所谓的“反向代理”工作,我的理解就是可以将域名映射到部署的服务(程序)中。
server {
listen 443 ssl;
server_name www.yuming.com;
ssl_certificate /usr/local/nginx/conf/httpsCertificate/xx.xxx.xxxx.pem;
ssl_certificate_key /usr/local/nginx/conf/httpsCertificate/xx.xxx.xxxx.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
rewrite ^/$ https://www.yuming.com/login redirect;
location / {
proxy_intercept_errors on;
proxy_pass http://127.0.0.1:9999;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
server {
listen 8080;
server_name www.yuming.com;
location / {
alias /home/xxx/xxx/dist/;
index index.html;
}
}
上面主要有两个server配置,为了避免争议,我将域名和文件名做了处理。nginx.conf中配置了两个服务(在http{}中)。我们主要看第二个。网上搜一下就大概能明白,这个配置,我如果访问www.yuming.com:8080,那么就可以访问到服务器中的/home/xxx/xxx/dist/index.html资源。
虽然易懂,但还是有很多坑
1.端口号,服务器需要放行端口,一开始我不知道服务器需要配置,一直无法访问。
2.alias 参数 结尾需要加/ ,这里也可写作root。
3.nginx需要对访问的资源具有权限(这是很多报403的原因)
所以 开端口 加/ 加权限 解决
3.Linux 命令
说实话,不常用linux,命令真的不太记得住
修改文件权限
sudo chmod index.html 777
将文件从本地传输至服务器 其中 -r代表文件夹 -P是端口,注意P要大写
scp -r -P 8000 /Users/xxxx/xxxx/dist user@123.45.678.90:/home/xxx/xxx
快速查看文件信息
ll
vim指令
i插入 开始编辑
按下esc
:q!强制退出不保存
:w!强制保存
:wq!强制保存退出
4.跨域问题
终于将服务部署完成并且运行成功后,前端忽然报错了,页面按钮请求均无反应,前端跟我说可能是跨域问题,于是我又开始寻求答案。原来,只要是跨域名,跨端口,跨协议,都是跨域。
解决这个问题我其实只花了一行代码
在需要调用的controller类上加上了一个注解:
@CrossOrigin(allowCredentials = "true",allowedHeaders = "*")
ok大功告成
其实在这个过程中我感受到最大的一点就是:知识太缺乏了。要是熟练掌握nginx配置、正则表达式、linux命令、maven项目的编译运行……
其实配置很简单!!
虽然我最终成功配置,但是深深感受到了自己的“无知”,真是惭愧。
希望有一天能够不再现学现用,虽然我觉得解决问题的能力同样重要,但起码不要从头开始现学现用。