nuxt项目部署到Apache服务器记录

博客又双叒叕改版了，我也记不清楚这是第几次改版，PHP火的时候，折腾了好几次，后来前后端分离又火起来了，又折腾了一次改版，然后又说前后端分离对SEO不友好，这又折腾了一个版本。每一次改完版后，我都在心里默默地对自己说：“这是最后一次，以后再也不折腾了，文章又不会写，天天折腾这破页面”，结果……

项目部署准备 - 服务器篇

系统：Centos7

服务器：Apache2.4

配置https

前段时间，群友问我，阿里云可以申请免费的SSL证书了，为什么不给网站弄上。我寻思也对，之前弄小程序接口的时候还要靠BUG大法才能刷出来免费的SSL证书，现在有免费的，不要白不要。

申请证书以及下载这些就不说了，下面说说服务器的配置。

第一步：先看下apache服务器的modules目录上有没有ssl模块（mod_ssl.so），如果没有，需要先安装该模块：

shellcopied
cd modules
yum install -y mod_sll openssl

第二步：把下载好的证书上传到服务器，随便扔到哪个目录都OK。

第三步：修改conf目录下的httpd.conf文件，把下面的几项前面的#号去掉：

• #LoadModule ssl_module modules/mod_ssl.so
• #Include conf/extra/httpd-ssl.conf

第四步：编辑conf目录下http-ssl.conf或conf.d/ssl.conf文件

csharpcopied
# 监听443端口
Listen 443

# 修改加密套件
SSLCipherSuite ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!a

SSLHonorCipherOrder on 

SSLPassPhraseDialog  builtin

SSLSessionCache        "shmcb:/server/httpd/logs/ssl_scache(512000)"
SSLSessionCacheTimeout  300

##
## SSL Virtual Host Context
##
<VirtualHost _default_:443>
  # 添加SSL安全协议
  SSLProtocol TLSv1 TLSv1.1 TLSv1.2
  # 文件夹路径
  DocumentRoot "/www/blog"
  # 域名地址
  ServerName www.humandetail.com
  # 日志文件
  ErrorLog "/server/httpd/logs/home/error_log"
  TransferLog "/server/httpd/logs/home/access_log"
  # 开启SSL
  SSLEngine on
  # 公钥的绝对路径
  SSLCertificateFile "/xxxx/xxxx_public.crt"
  # 私钥的绝对路径
  SSLCertificateKeyFile "/xxxx/xxxx.key"
  # 证书链文件的绝对路径
  SSLCertificateChainFile "/xxxx/xxxx_chain.crt"
</VirtualHost>

第五步：重启服务器

shellcopied
sevice httpd restart

经过这几步操作，理应可以正常访问https://xxx，如果还是不行，请移步百度。

配置http重定向到https

conf/httpd.conf

csharpcopied
<VirtualHost *:80>
	ServerName www.humandetail.com
	# 开启重定向
	RewriteEngine on
	# 跳转到https
	RewriteCond %{SERVER_PORT} !^443$
	RewriteRule ^(.*)$ https://%{SERVER_NAME}$1 [L,R]
</VirtualHost>

Apache反向代理

由于nuxt项目是运行在node环境下的，所以需要配置反向代理来访问相应的端口，当然，直接访问相应的端口也无碍，但是这样不太美观。

conf/httpd-ssl.conf，在刚才的https配置里面添加如下内容：

plain-textcopied
<VirtualHost _default_:443>
  # ... 省略刚才的配置
  # 添加如下内容
  <Proxy *>
    Order deny,allow
    Allow from all
  </Proxy>
  ProxyRequests Off
  # 开启反向代理
  ProxyPreserveHost On
  ProxyPass / http://127.0.0.1:3000/
  ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>

使用pm2管理Node进程

即然是Node项目，那肯定得需要一个进程管理工具，pm2无疑是一个很好的选择。

全局安装

shellcopied
npm i -g pm2

pm2命令

• 启动进程/应用：pm2 start app.js
  • 可以使用pm2 start app.js --name aliasName来给该进程添加别名
• 保存当前进程启动状态：pm2 save
• 服务器重启后自启动：pm2 startup
• 查看进程列表：pm2 list
• 重启进程：pm2 restart [name]/pm2 restart all
• 结束进程：pm2 stop [name]/pm2 stop all
• 删除某个进程：pm2 delete [name]/pm2 delete all
• 查看日志：pm2 logs/pm2 logs [name]

项目发布

我看网上很多地方都说只需要把.nuxt目录、static目录、nuxt.config.js以及package.json上传到服务器即可，但是我这样做并不能正常地启动项目……

没办法，只好把除了.nuxt以及node_modules之外的所有文件都上传到服务器上。

上传完毕后，依次执行以下命令：

shellcopied
# 安装项目依赖
npm install
# 执行打包命令
npm run build
# 运行项目
pm2 start npm --name blog -- run start
# 保存进程列表
pm2 save
# 设置服务器自启动
pm2 startup

一波骚操作之后，项目就应该跑起来了。

我不知道你的行不行，反正我的项目是跑起来了。