项目上线的一些基础问题:Vue服务器部署,Nginx配置,linux命令,跨域问题……

 

 

今天有前端的代码需要部署到服务器上,自己实在是太菜了,中间遇到许多问题,不过最终暂时成功,有点乱,这里做个小结。

本文将以遇到问题,及如何解决的形式展开,仅为个人浅薄理解。

项目采用烂小街的前后端分离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 [email protected]:/home/xxx/xxx

快速查看文件信息

ll

vim指令

i插入 开始编辑

按下esc

:q!强制退出不保存
:w!强制保存
:wq!强制保存退出

4.跨域问题

终于将服务部署完成并且运行成功后,前端忽然报错了,页面按钮请求均无反应,前端跟我说可能是跨域问题,于是我又开始寻求答案。原来,只要是跨域名,跨端口,跨协议,都是跨域。

解决这个问题我其实只花了一行代码

在需要调用的controller类上加上了一个注解:

@CrossOrigin(allowCredentials = "true",allowedHeaders = "*")

ok大功告成


其实在这个过程中我感受到最大的一点就是:知识太缺乏了。要是熟练掌握nginx配置、正则表达式、linux命令、maven项目的编译运行……

其实配置很简单!!

虽然我最终成功配置,但是深深感受到了自己的“无知”,真是惭愧。

希望有一天能够不再现学现用,虽然我觉得解决问题的能力同样重要,但起码不要从头开始现学现用。

你可能感兴趣的:(杂)