_林冲资料

本文主要介绍_林冲资料 方法和在新技术下所面对的“挑战”,方便大家深入理解_林冲资料 过程。本文也将分享_林冲资料 所遇到的问题和应对策略,怎么解决怎么做的问题。
通过深入本文可以理解代码原理,进行代码文档的下载,也可以查看相应 Demo 部署效果。

前两篇文章中,我分别介绍了框架的搭建利用vue-cli + vant搭建一个移动端开发模板,并且把项目中axios请求和vuex的用法做了简要的介绍如何在项目里管理好axios请求与vuex。在这两篇文章的评论中,有些朋友希望把项目放在线上,可以供大家预览一下。既然需求来了,哪有拒绝的道理。正好我之前也没弄过部署项目到服务器上,那就乘这次机会把项目部署在服务器上,巩固一下自己学的知识。

页面上是我乱加的东西,后续会慢慢完善(可能是模仿某个成熟的项目,也有可能是封装组件)。

文章概括

  1. 部署一个vue-cli脚手架生成的项目,丢到服务器上。预览地址
  2. 部署一个nuxt.js生成的项目,丢到服务器上。预览地址

一、准备工作

  1. 你需要到阿里云(或者其他云服务器)买个你自己的服务器耍耍。我买的是云服务器ECS,操作系统是CentOS。
  2. 购买完成后,你需要一个工具可视化访问你的服务器,我用的是MobaXterm

二、安装nginx

  1. 用MobaXterm连接上服务器后,界面是这样的(www目录是我后来建的,用来放前端项目)

_林冲
2. 安装命令yum install nginx,出现确认时按y

3. 安装完成后,输入 service nginx start 启动nginx

三、部署web项目(vue-cli)

  1. nginx默认安装在/etc/目录下,我们用cd命令
cd /etc/nginx 

进入到nginx根目录下,在这里有一个nginx.conf配置文件,想要部署项目,需要修改这里相关的配置,我们用vim nginx.conf进入按i键,下边会显示insert字样,代表此时可以进行编辑,修改server对象(后面的注释是为了解释代码的意思,项目使用时需要把注释去掉,不然会报错)

server {         listen       8080       default_server; // 开放访问的端口号         server_name  47.114.140.199;            // 服务器IP         root         /usr/share/nginx/html;          # Load configuration files for the default server block.         include /etc/nginx/default.d/*.conf;          location / {           root /www/spa/dist;   // 项目所在的位置,我是在根目录新建了www文件夹           index index.html;     // 此html页面作为IP访问项目的入口           try_files $uri $uri/ /index.html; // 对于部署Vue、React等单页应用项目,为防止页面刷新时出现404,需要设置         }          error_page 404 /404.html;             location = /40x.html {         }          error_page 500 502 503 504 /50x.html;             location = /50x.html {         }     }  
  1. 配置完毕后按Esc退出编辑,然后按:wq退出并保存,如果提示无法写入,无权限,或者改文件只读,请输入:set noreadonly,然后再次:wq,成功会返回命令界面
  2. 接着我们重启nginx服务器,nginx -s reload,如果提示失败,请输入nginx -c /etc/nginx/nginx.conf,然后再次重启,到此为止,我们的项目就部署好了。
  3. 前端项目执行build指令后,将dist文件夹放到 /www/spa 路径下。
  4. 浏览器输入IP:端口号访问项目,会出现无法访问的情况,这是因为没有添加安全组规则(服务器没放开此端口的访问权限),这个时候我们需要有添加安全组规则,以我项目为例,我快速添加了多个安全组规则。添加完8080端口后,我们就可以在8080端口访问我们的项目了。
    _林冲

四、部署服务的渲染项目(nuxt.js举例,next.js同理)

  1. 安装nodejs环境(具体步骤请点击此链接)[https://help.aliyun.com/document_detail/50775.html]。
  2. 安装yarn(执行以下两步)
wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo 
yum install yarn 
  1. 直接用nuxt.js官网的例子,执行build指令后,我们把以下文件(文件夹)放到 /www/ssr/blog 路径下
.nuxt nuxt.config.js package.json static  // 如果有用到静态资源 
  1. 再次进入到nginx根目录下,修改nginx.conf,添加一个新的server对象
server {     listen       8081;     server_name  47.114.140.199;     root /www/ssr/blog;     location / {         proxy_pass http://127.0.0.1:3000; // 反向代理         proxy_set_header Host $host;         proxy_set_header X-Forwarded-For $remote_addr;     } } 
  1. 接着我们重启nginx服务器
nginx -s reload 
  1. 依次以下执行,进入到nuxt项目的路径下,install依赖并启动应用
cd ~ cd /www/ssr/blog yarn install -production yarn start 

在执行yarn install和yarn start两个命令时可能会报错,可能是node版本太低了,可以用nvm切换node版本。

_林冲

  1. 打开IP:8081就可以访问我们的项目了(记得要在阿里云服务器上把8081端口放开)

  2. 安装pm2进程守护

npm install pm2 -g 

这里要记住你的安装地址,我的是/root/node-v6.9.5-linux-x64/bin/pm2
_林冲
安装完成后你执行命令

pm2 list 

如果报如下错误

pm2: command not found 

你需要配制到全局,即创建一个linux下的软连接。找到全局环境PATH路径,输入命令:

echo $PATH 

回车后有以下几个值

/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin 

你可以选择任何一个以:隔开的路径做为系统环境路径,我通常会选/usr/local/bin。执行以下指令创建软连接

ln -s /root/node-v6.9.5-linux-x64/bin/pm2 /usr/local/bin/ 

如果报错了,你可以换一个
_林冲
比如换成/usr/local/sbin/

ln -s /root/node-v6.9.5-linux-x64/bin/pm2 /usr/local/sbin/ 

注意:/root/node-v6.9.5-linux-x64/bin/pm2是我上面安装pm2的地址,你需要看你自己的安装地址是什么。

这时候以下任一一个指令执行(我用的是上面这个,下面的会导致errored,还不知道原因):

pm2 start npm --name "SSR-service" -- run start  #SSR-service的名称随便取,最好是你package.json里的name pm2 start yarn --name "SSR-service" -- run start 

_林冲

整个nginx配置:

# For more information on configuration, see: #   * Official English Documentation: http://nginx.org/en/docs/ #   * Official Russian Documentation: http://nginx.org/ru/docs/  user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid;  # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf;  events {     worker_connections 1024; }  http {     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '                       '$status $body_bytes_sent "$http_referer" '                       '"$http_user_agent" "$http_x_forwarded_for"';      access_log  /var/log/nginx/access.log  main;      sendfile            on;     tcp_nopush          on;     tcp_nodelay         on;     keepalive_timeout   65;     types_hash_max_size 2048;      include             /etc/nginx/mime.types;     default_type        application/octet-stream;      # Load modular configuration files from the /etc/nginx/conf.d directory.     # See http://nginx.org/en/docs/ngx_core_module.html#include     # for more information.     include /etc/nginx/conf.d/*.conf;      server {         listen       8080	default_server;         server_name  47.114.140.199;         root         /usr/share/nginx/html;          # Load configuration files for the default server block.         include /etc/nginx/default.d/*.conf;          location / {       	  root /www/spa/dist;       	  index index.html;       	  try_files $uri $uri/ /index.html;         }          error_page 404 /404.html;             location = /40x.html {         }          error_page 500 502 503 504 /50x.html;             location = /50x.html {         }     }          server {         listen       8081; 	      server_name  47.114.140.199;         root /www/ssr/blog;         location / {             proxy_pass http://127.0.0.1:3000;             proxy_set_header Host $host;             proxy_set_header X-Forwarded-For $remote_addr;         }     }   # Settings for a TLS enabled server. # #    server { #        listen       443 ssl http2 default_server; #        listen       [::]:443 ssl http2 default_server; #        server_name  _; #        root         /usr/share/nginx/html; # #        ssl_certificate "/etc/pki/nginx/server.crt"; #        ssl_certificate_key "/etc/pki/nginx/private/server.key"; #        ssl_session_cache shared:SSL:1m; #        ssl_session_timeout  10m; #        ssl_ciphers PROFILE=SYSTEM; #        ssl_prefer_server_ciphers on; # #        # Load configuration files for the default server block. #        include /etc/nginx/default.d/*.conf; # #        location / { #        } # #        error_page 404 /404.html; #            location = /40x.html { #        } # #        error_page 500 502 503 504 /50x.html; #            location = /50x.html { #        } #    }  }  

五、可能出现的错误

我在用pm2启动项目时,会显示状态是online,但是再执行pm2 ls后,状态又变成了errored。经过排查我发现,造成错误的指令是以下两中,一个使install时没加 -production

yarn install -production 

还有一个是pm2启动项目时用的是yarn,而不是npm

pm2 start npm --name "SSR-service" -- run start 

_林冲

六、常用pm2指令

  1. pm2 delete all # 关闭并删除所有应用
  2. pm2 list # 列表 PM2 启动的所有的应用程序
  3. pm2 stop all # 停止所有的应用程序
  4. pm2 start app.js –name="api" # 启动应用程序并命名为 "api"

七、参考文章

  • 原来安装Nginx并部署vue前端项目是这么简单
  • 部署Node.js环境(CentOS 7)
  • NuxtJS 项目部署如何部署到nginx
  • PM2 常用命令

八、总结

通过记录这两个项目如何发布到服务器上,我大致了解了nginx的相关知识。如果项目中有不对或者不妥的地方,或者跟着项目走遇到报错的地方,欢迎在评论区提出。

_林冲资料部分资料来自网络,侵权毕设源码联系删除

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » _林冲资料

提供最优质的资源集合

立即查看 了解详情