前两篇文章中,我分别介绍了框架的搭建利用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的相关知识。如果项目中有不对或者不妥的地方,或者跟着项目走遇到报错的地方,欢迎在评论区提出。

手把手教你把web应用丢到服务器上(单页应用+ 服务端渲染)的更多相关文章

  1. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  2. 当java web项目部署到服务器上时,无法将图片等媒体文件保存到服务器的最终奥义

    今天,我在部署web项目至云服务器上(Tomcat8.0)时,突然发现我的应用,无法上传图片,视频等多媒体文件了,一再检查自己的代码逻辑没有问题之后,逐一排查,首先想到的就是看一下控制台打印的日志,日 ...

  3. 手把手教你入门web.xml:吃透监听器

    监听器的原理: 被监听对象→对象拥有的事件→捕获到事件变化→监听器捕捉事件→监听器处理该事件 Web服务器上有4个范围,抛开page范围,还有request范围,session范围,applicati ...

  4. Web启动服务器上的某一个服务

    情景是这样的.. 网页打开一个数据列表..数据要求实时从其他多个平台上获取.. 所以就有了一个Web页面..还有个WinService的服务来定时获取这些数据... 问题来了.. 发现Service有 ...

  5. Linux 下 将使用Python-Django开发的web应用布置到服务器上(亲测有效)

    写在前面: Django是一个卓越的新一代Web框架,相信使用Python的人对此并不陌生,但将我们完成的web应用布置到到服务器上并不是一件容易的事情. Django详细的教程可以参考http:// ...

  6. 如何将Java Web项目部署到服务器上

    转自:(此处更详细)http://blog.csdn.net/gulu_gulu_jp/article/details/50994003 一.前言 前面我们已经尝过了在云服务器上部署代码的甜头了,现在 ...

  7. Web浏览器导出FTP服务器上的文件

    开发思路:1.代码登录ftp服务器下载文件到服务器2.通过web浏览器下载服务器上的文件 using System; using System.Collections; using System.Co ...

  8. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

  9. 手把手教你搭建WEB服务器和FTP服务器

    注:本次教程的环境是在“Windows 10 PC中远程控制的Windows Server 2012 R2服务器”,你可以自己在自己电脑中安装虚拟机再安装Windows Server 2012 R2服 ...

随机推荐

  1. 【JVM】关于OOM的二三事

    组织架构 严格来说,StackOverflowError和OutOfMemoryError都属于错误,而不是异常. java.lang.StackOverflowError public class ...

  2. css背景图定位和浮动

    网站图标引入:<link rel="shortcut icon" href="ico图标地址"> 背景图片  background-image: u ...

  3. Java实现 LeetCode 771 宝石与石头(这是真暴力)

    771. 宝石与石头 给定字符串J 代表石头中宝石的类型,和字符串 S代表你拥有的石头. S 中每个字符代表了一种你拥有的石头的类型,你想知道你拥有的石头中有多少是宝石. J 中的字母不重复,J 和 ...

  4. Java实现 蓝桥杯 算法提高 队列操作

    算法提高 队列操作 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 队列操作题.根据输入的操作命令,操作队列(1)入队.(2)出队并输出.(3)计算队中元素个数并输出. 输入格式 ...

  5. Java实现 LeetCode 458 可怜的小猪

    458. 可怜的小猪 有 1000 只水桶,其中有且只有一桶装的含有毒药,其余装的都是水.它们从外观看起来都一样.如果小猪喝了毒药,它会在 15 分钟内死去. 问题来了,如果需要你在一小时内,弄清楚哪 ...

  6. Java实现 LeetCode 416 分割等和子集

    416. 分割等和子集 给定一个只包含正整数的非空数组.是否可以将这个数组分割成两个子集,使得两个子集的元素和相等. 注意: 每个数组中的元素不会超过 100 数组的大小不会超过 200 示例 1: ...

  7. Java实现 蓝桥杯VIP 算法训练 矩阵加法

    时间限制:1.0s 内存限制:512.0MB 问题描述 给定两个N×M的矩阵,计算其和.其中: N和M大于等于1且小于等于100,矩阵元素的绝对值不超过1000. 输入格式 输入数据的第一行包含两个整 ...

  8. Java实现 蓝桥杯VIP 算法提高 5-3日历

    算法提高 5-3日历 时间限制:1.0s 内存限制:256.0MB 问题描述 已知2007年1月1日为星期一.设计一函数按照下述格式打印2007年以后(含)某年某月的日历,2007年以前的拒绝打印.为 ...

  9. Java实现第八届蓝桥杯青蛙跳杯子

    青蛙跳杯子 题目描述 X星球的流行宠物是青蛙,一般有两种颜色:白色和黑色. X星球的居民喜欢把它们放在一排茶杯里,这样可以观察它们跳来跳去. 如下图,有一排杯子,左边的一个是空着的,右边的杯子,每个里 ...

  10. hadoop知识整理(3)之MapReduce之代码编写

    前面2篇文章知道了HDFS的存储原理,知道了上传和下载文件的过程,同样也知晓了MR任务的执行过程,以及部分代码也已经看到,那么下一步就是程序员最关注的关于MR的业务代码(这里不说太简单的): 一.关于 ...