linux+nginx+express+mongoose+webpack+react+react-router+sass构建web应用

约定不等于承诺〃 2022-06-05 01:13 132阅读 0赞

*更新时间：2017年11月13日22:13:33*

[《我的博客地图》][Link 1]

前端的技术积累了一段时间，来学一下后端开发，服务器开发工程师的那些事。

1、概述

2、pm2

pm2，forever带有负载均衡功能的node应用进程管理器

$sudo pm2 start server.js

$sudo pm2 list

$sudo pm2 stop all

后端开发环境：

lamp-linux+Apache+MySQL+PHP

lnmp-linux+Nginx+MySQL+PHP

3、nginx

node已经作为服务器了，为什么还用nginx？

nginx做转发和负载的，nginx的优势在负载均衡和静态文件处理，node做静态服务和动态服务均可，但稳定性不如nginx，Nginx+Node比较好，Nginx来处理静态文件请求和记录web访问日志；

就像Tomcat做了服务器为什么还需要Nginx呢？  
    Node能够运行javascript代码，但是处理静态资源的能力不如Nginx。也就是所谓的应用服务器与web服务器吧……        用 nginx 做反向代理和静态资源嘛。不过静态资源现在用 cdn 来做的话，也可以只利用它的反向代理。

node自己本身可以作为服务器进行驱动，但是node本身对文件的处理能力并不是很好，所以当我们的生产环境中应尽量使用nginx来处理静态的资源以及反向代理，同时也解决了node分布式以及负载均衡的相关问题。

2、MongoDB

mongod 是用来连接到mongodb数据库服务器的，即服务器端。  
mongo 是用来启动MongoDB shell的，是mongodb的命令行客户端。

启动mongodb数据库服务器：sudo mongod

3、sass

概述

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种是后缀名为scss，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

example.sass

body  
  background: \#eee  
  font-size:12px  
p  
  background: \#0982c1

example.scss

body \{  
  background: \#eee;  
  font-size:12px;  
\}  
p\{  
  background: \#0982c1;  
\}

导入，sass的导入( @import)规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以 @import方式存在。

变量，sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

$fontSize: 12px;  
body\{  
    font-size:$fontSize;  
\}

嵌套，sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。在选择器嵌套中，可以使用 &表示父元素选择器。所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

.fakeshadow \{  
  border: \{  
    style: solid;  
    left: \{  
      width: 4px;  
      color: \#888;  
    \}  
    right: \{  
      width: 2px;  
      color: \#ccc;  
    \}  
  \}  
\}

项目依赖中配置：

npm install -S sass-loader

npm install -S node-sass

webpack中配置：

test: /\\.(css|scss)$/,

loader:"style-loader!css-loader!sass-loader"  
\}

style-loader!css-loader!sass-loader意思，将sass编码成css，将css编码成style

4、css设置中文文字和英文文字

Mac OS：   
华文细黑：STHeiti Light \[STXihei\]   
华文黑体：STHeiti   
华文楷体：STKaiti   
华文宋体：STSong   
华文仿宋：STFangsong   
儷黑 Pro：LiHei Pro Medium   
儷宋 Pro：LiSong Pro Light   
標楷體：BiauKai   
蘋果儷中黑：Apple LiGothic Medium   
蘋果儷細宋：Apple LiSung Light

Windows：   
新細明體：PMingLiU   
細明體：MingLiU   
標楷體：DFKai-SB   
黑体：SimHei   
宋体：SimSun   
新宋体：NSimSun   
仿宋：FangSong   
楷体：KaiTi   
仿宋\_GB2312：FangSong\_GB2312   
楷体\_GB2312：KaiTi\_GB2312   
微軟正黑體：Microsoft JhengHei   
微软雅黑体：Microsoft YaHei

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440